@php
    $title = $blog->title;
    $metaTitle = $blog->meta_title ?: 'Nexxuz | Blog | ' . $blog->title;
    $metaDescription = $blog->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($blog->title), 160);
    $canonicalUrl = $blog->canonical_url ?: route('blog.show', $blog->slug);
    $ogType = 'article';
    $ogImage = !is_null($blog->getMedia('blog')->first())
        ? $blog->getMedia('blog')->first()->getUrl()
        : asset('Nexxuz%20-%20Logo.png');
    $ogImageAlt = $blog->title;
@endphp

@extends('layouts.app')

@section('head')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.2/quill.core.css" integrity="sha512-a7lWBqHHHcLWWynFie8nxZ2haAUHs34w7XiVra9AjlL+/XpDK1GOAGfzcAoLW978tD8/fym7JYxDxg8uPszyfw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .ql-container.ql-snow {
            border: none !important;
        }
    </style>
    <meta property="article:published_time" content="{{ Carbon\Carbon::make($blog->created_at)->format('Y-m-d H:i:s') }}">
    <meta property="article:modified_time" content="{{ Carbon\Carbon::make($blog->updated_at)->format('Y-m-d H:i:s') }}">
@endsection

@section('schema')
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'BlogPosting',
            'headline' => $blog->title,
            'datePublished' => optional($blog->created_at)->toIso8601String(),
            'dateModified' => optional($blog->updated_at)->toIso8601String(),
            'author' => [
                '@type' => 'Person',
                'name' => 'William Penton',
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => 'Nexxuz',
                'logo' => [
                    '@type' => 'ImageObject',
                    'url' => asset('Nexxuz - Logo.png'),
                ],
            ],
            'mainEntityOfPage' => $canonicalUrl,
            'description' => $metaDescription,
            'image' => $ogImage,
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endsection

@section('content')
    <article class="active" data-page="blog">
        <header>
            <h2 class="h2 article-title">Blog</h2>
        </header>

        <section class="blog-posts">
            <a href="#">
                <figure class="blog-banner-box" style="height:50em;">
                    @if(!is_null($blog->getMedia('blog')->first()))
                    <img src="{{ $blog->getMedia('blog')->first()->getUrl() }}" alt="{{ $blog->title }}" loading="lazy">
                    @else
                    <img src="{{ asset('Nexxuz - Logo.png') }}" alt="{{ $blog->title }}" loading="lazy">
                    @endif
                </figure>

                <div class="blog-content">
                    <div class="blog-meta">
                        <p class="blog-category">{{ \App\Models\BlogCategory::find($blog->blog_category_id)?->name }}</p>
                        <span class="dot"></span>
                        <time datetime="{{ $blog->created_at }}">
                            {{ \Carbon\Carbon::make($blog->created_at)->format('l F j, Y H:i:s') }}
                            @if($blog->created_at != $blog->updated_at) <br/><span class="text-xs">Updated at: {{ \Carbon\Carbon::make($blog->updated_at)->format('l F j, Y H:i:s') }}</span> @endif
                        </time>
                    </div>

                    <h3 class="h3 blog-item-title">{{ $blog->title }}</h3>
                    <div class="blog-text" id="content"></div>
                </div>
            </a>
        </section>
    </article>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <script>
        const quill = new Quill('#content', {
            modules: {
                toolbar: false
            },
            theme: 'snow'
        });
        quill.setContents({!! $blog->content !!});
        quill.disable();
    </script>
@endsection