@extends('layout.masterBlog')
@section('title',$title)
@section('description',$description)
@section('og:locale',app()->getLocale())
@section('og:type',$og_type)
@section('og:title',$og_title)
@section('og:description',$og_description)
@section('og:url',$og_url)
@section('og:site_name',$og_sitename)
@section('twitter:title',$twitter_title)
@section('twitter:description',$twitter_desc)
@section('content')


<div class="card mb-3">
            <div class="card-body">
              <div class="row">
                <div class="col-lg-6 mb-4 mb-lg-0">
                  <div class="product-slider" id="galleryTop">
                    <div class="swiper-container theme-slider position-lg-absolute all-0" data-swiper=''>
                      <div class="swiper-wrapper h-100">
                        <div class="swiper-slide h-100">
                          <img class="rounded-1 fit-cover h-100 w-100" src="{{ asset('assets/img/category_img/'.$productDetail->category->image) }}" alt="" />
                        </div>
                        <!--
                        <div class="swiper-slide h-100"><img class="rounded-1 fit-cover h-100 w-100" src="" alt="" /></div>
                        <div class="swiper-slide h-100"> <img class="rounded-1 fit-cover h-100 w-100" src="" alt="" /></div>
                        <div class="swiper-slide h-100"> <img class="rounded-1 fit-cover h-100 w-100" src="../../../assets/img/products/1-4.jpg" alt="" /></div>
                        <div class="swiper-slide h-100"> <img class="rounded-1 fit-cover h-100 w-100" src="../../../assets/img/products/1-5.jpg" alt="" /></div>
                        <div class="swiper-slide h-100"> <img class="rounded-1 fit-cover h-100 w-100" src="../../../assets/img/products/1-6.jpg" alt="" /></div>-->
                      </div>
                      <div class="swiper-nav">
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <h5>{{$productDetail->post_name}}</h5>
                  <a class="fs--1 mb-2 d-block" href="{{ route('category.detail',$productDetail->category->url)}}">

                     {{ App::getLocale() == 'tr' ? $productDetail->category->name : $productDetail->category->name_en  }}
                   </a>
                  <div class="fs--2 mb-3 d-inline-block text-decoration-none">
                    <span class="fa fa-star text-warning"></span>
                    <span class="fa fa-star text-warning"></span>
                    <span class="fa fa-star text-warning"></span>
                    <span class="fa fa-star text-warning"></span>
                    <span class="fa fa-star-half-alt text-warning star-icon"></span>
                    <span class="ms-1 text-600">(8)</span></div>
                    <p class="fs--1">
                     {!! $productDetail->preface !!}
                   </p>
                  <p class="fs--1 mb-3">@lang('general.tags') @foreach($productDetail->tag as $tag)
                   <a class="badge border link-secondary me-1 text-decoration-none" href="#!">
                      {{$tag->title}}
                    </a>
                     @endforeach
                  </p>
                  <div class="row">
                    @if($relatedProducts->count() > 0)
                      @foreach($relatedProducts as $product)

                      <p class="fs--1 mb-3">Dersler:
                          <a href="{{ route('detail', ['slug' => $product->slug]) }}">{{$product->post_name}}</a>
                        </p>
                            
                       @endforeach
                     @endif

                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="overflow-hidden mt-4">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                      <li class="nav-item"><a class="nav-link active ps-0" id="description-tab" data-bs-toggle="tab" href="#tab-description" role="tab" aria-controls="tab-description" aria-selected="true">@lang('general.description')</a></li>
                      
                     <!-- <li class="nav-item"><a class="nav-link px-2 px-md-3" id="specifications-tab" data-bs-toggle="tab" href="#tab-specifications" role="tab" aria-controls="tab-specifications" aria-selected="false">@lang('general.feature')</a></li>-->

                      <li class="nav-item"><a class="nav-link px-2 px-md-3" id="reviews-tab" data-bs-toggle="tab" href="#tab-reviews" role="tab" aria-controls="tab-reviews" aria-selected="false">@lang('general.comment') ( {{ $activeComment->count() }} )</a></li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="tab-description" role="tabpanel" aria-labelledby="description-tab">
                        <div class="mt-3">
                          {!! $productDetail->content !!}                      
                        </div>
                      </div>

                     <!-- <div class="tab-pane fade" id="tab-specifications" role="tabpanel" aria-labelledby="specifications-tab">
                        <table class="table fs--1 mt-3">
                          <tbody>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Processor</td>
                              <td>2.3GHz quad-core Intel Core i5,</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Memory</td>
                              <td>8GB of 2133MHz LPDDR3 onboard memory</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Brand Name</td>
                              <td>Apple</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Model</td>
                              <td>Mac Book Pro</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Display</td>
                              <td>13.3-inch (diagonal) LED-backlit display with IPS technology</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Storage</td>
                              <td>512GB SSD</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Graphics</td>
                              <td>Intel Iris Plus Graphics 655</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Weight</td>
                              <td>7.15 pounds</td>
                            </tr>
                            <tr>
                              <td class="bg-100" style="width: 30%;">Finish</td>
                              <td>Silver, Space Gray</td>
                            </tr>
                          </tbody>
                        </table>
                      </div> -->
                      <div class="tab-pane fade" id="tab-reviews" role="tabpanel" aria-labelledby="reviews-tab">
                        <div class="row mt-3">

                          <div class="col-lg-6 mb-4 mb-lg-0">

                            @if($activeComment->count()>0)
                             @foreach($activeComment as $com)
                            <div class="mb-1">
                              <div class="avatar avatar-xl">
                                @if($com->user->image == "")
                                <img class="rounded-circle" src="{{ asset('assets/img/user/avatar.png') }}" >
                                @else
                                <img class="rounded-circle" src="{{ asset('assets/img/user/'.$com->user->image)}}">
                                @endif
                              </div>
                              <span class="ms-3 text-dark fw-semi-bold">{{$com->user->name}}, dedi ki..</span>
                            </div>

                            <p class="fs--1 mb-2 text-600">{{$com->user->name}} • {{ $com->created_at}} </p>
                            <p class="mb-0">{{$com->comment}}</p>
                                <hr class="my-4" />
                           
                               @endforeach
                              @else

                              <div class="md-lg-12 alert alert-danger" role="alert">
                                 @lang('general.not_comment')
                              </div>

                           @endif

                            
                          
                          </div>
                          @if(Auth::check()) 
                          <div class="col-lg-6 ps-lg-5">
                            <form>
                                <input hidden class="form-control" id="user_id" name="user_id" type="text" value="{{ Auth::user()->id}}">
                                <input hidden class="form-control" id="post_id" name="post_id" type="text" value="{{ $productDetail->id }}" >
                             <div class="mb-3">
                                <label class="form-label" for="formGroupNameInput">@lang('general.name')</label>
                                <input disabled class="form-control"  value="{{Auth::user()->name}}" id="formGroupNameInput" type="text" />
                              </div>
                              <div class="mb-3">
                                <label class="form-label" for="formGroupEmailInput">@lang('general.email')</label>
                                <input disabled class="form-control" id="formGroupEmailInput"  value="{{Auth::user()->email}}" type="email" />
                              </div>
                            <div class="mb-3">
                                <label class="form-label" for="formGrouptextareaInput">@lang('general.review')</label>
                                <textarea placeholder="Makale hakkında yorumunuz var mı?" class="form-control" id="com" name="comment" rows="3"></textarea>
                              </div>
                              <a class="btn btn-primary ajax-comment" data-id="{{$productDetail->id}}" id="ajaxComment" type="submit">@lang('general.submit')</a>
                              
                            </form>
                          </div>

                          @else

                          <div class="col-lg-12">
                          <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <strong>@lang('general.login_comment')
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                          </div>


                          </div>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  @endsection
  
  @section('javascript')
<script>
  $(document).on('click', '.ajax-comment', function() {
    var link_data = $(this).data('id');
    var comment   = $("#com").val();
    
    $.ajax({
      headers:{
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type: 'post',
      url:  "{{ route('addComment') }}",
      data: {
        comment: comment,
        post_id: link_data,
      },
      success: function(data) {
        // alert(data)
        if (data.success) {
            Swal.fire({
                title: data.success,
                icon: 'success',
                focusConfirm: true,
                confirmButtonText:
                  '<i class="fa fa-thumbs-up"></i> Tamam!',
          })
          $("#com").val(''); 

        } else {
             Swal.fire({
                title: data.error,
                icon: 'info',
                focusConfirm: false,
                confirmButtonText:
                  '<i class="fa fa-thumbs-up"></i> Anladım!',
            
          })
        }
      }
    });
  });
</script>
@endsection