@extends('layouts.app')
@section('header')
    <link rel="stylesheet" href="{{ asset('css/blog.css') }}"/>
    @if($article->faq)
        <script type="application/ld+json">
            {
              "@context": "https://schema.org",
              "@type": "FAQPage",
              "mainEntity": [
              @foreach($article->faq as $f)
                {
                    "@type": "Question",
                    "name": "{{ $f['question'] }}",
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": "{{ $f['answer'] }}"
                        }
                    }
                    @unless($loop->last) , @endunless
            @endforeach
            ]
          }
        </script>
    @endif

       <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "{{ $article->title }}",
      "image": [
        "{{ asset($article->image) }}"
       ],
      "datePublished": "{{ $article->updated_at }}",
      "dateModified": "{{ $article->updated_at }}",
      "author": [{
          "@type": "Person",
          "name": "{{ settings('title') }}",
          "url": "{{ route('index') }}"
        }]
    }
    </script>
    <script type="application/ld+json">[{
				"@context": "https://schema.org/",
				"@type": "CreativeWorkSeason",
				"name": "{{ $article->title }}",
				"aggregateRating": {
				"@type": "AggregateRating",
				"ratingValue": "{{ $article->star }}",
				"ratingCount": "4",
				"bestRating": "5",
				"worstRating": "1"
			}}]

	</script>
	    <script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "{{ route('index') }}",
    "name": "{{ settings('title') }}"
    }
  },{
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "{{ route('articles.index') }}",
     "name": "بلاگ"
   }
  },{
   "@type": "ListItem",
   "position": 3,
   "item":
   {
    "@id": "{{ route('articles.show', $article->slug) }}",
    "name": "{{ $article->title }}"
    }
  }
 ]
}
</script>
@endsection
@section('content')
    <div class="container body-content ps-0 pe-0">
        <div class="row">
            <div class="col-12">
                <ul class="breadcrumbs ps-0">
                    <li>
                        <a class="link" href="{{ route('index') }}">
                            <span>{{ settings('title') }}</span>
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('articles.index') }}"
                           class="link">
                            بلاگ
                        </a>
                    </li>

                    <li>
                        <a class="link" href="{{ route('articles.show', $article->slug) }}">
                            <span>{{ $article->title }}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row ">
            <div class="col-lg-8 articledescription more-c">
                <article>
                    <header class="mb-4">
                        <h1 class="fw-bolder mb-1 h1article">{{ $article->h1 ?: $article->title }}</h1>
                        <div>
                            <span class="badge bg-primary">
                                <span class="fa fa-calendar-alt"></span> {{ jdate($article->created_at)->format('d F Y') }}
                            </span>
                            @foreach($article->categories as $category)
                                <a class="badge bg-secondary text-decoration-none link-light"
                                   href="{{ route('articles.category', $category->slug) }}">
                                    <span class="fa fa-tag"></span>
                                    {{ $category->name }}
                                </a>
                            @endforeach
                        </div>
                    </header>
                    <section class="mb-5">{!! $article->content !!}</section>
                    @if($article->faq)
                        <div class="accordion my-5" id="accordionExample1">
                            <h4 class="text-center text-secondary"><span class="fa fa-question-circle"></span> سوالات
                                متداول</h4>
                            @foreach($article->faq as $f)
                                <div class="accordion-item">
                                    <h5 class="accordion-header" id="heading{{ $loop->iteration }}">
                                        <button class="accordion-button"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $loop->iteration }}"
                                                aria-expanded="true"
                                                aria-controls="collapse{{ $loop->iteration }}">
                                            {{ $f['question'] }}
                                        </button>
                                    </h5>
                                    <div id="collapse{{ $loop->iteration }}"
                                         class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                         aria-labelledby="heading{{ $loop->iteration }}"
                                         data-bs-parent="#accordionExample1">
                                        <div class="accordion-body">
                                            {{ $f['answer'] }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                </article>
                <section class="mb-5">
                    <div class="card bg-light">
                        <livewire:frontend.comments :commentableT="\App\Models\Article::class" :commentableI="$article->id"/>
                    </div>
                </section>
            </div>
            @include('frontend.articles.sidebar', [ 'action' => route('articles.index'), 'show_widgets' => true ])
        </div>
    </div>
@endsection