@php
    $title = $portfolio->title;
    $metaTitle = $portfolio->meta_title ?: 'Nexxuz | Portfolio | ' . $portfolio->title;
    $metaDescription = $portfolio->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($portfolio->title), 160);
    $canonicalUrl = $portfolio->canonical_url ?: route('portfolio.show', $portfolio->slug);
    $ogType = 'article';
    $ogImage = !is_null($portfolio->getMedia('portfolio')->first())
        ? $portfolio->getMedia('portfolio')->first()->getUrl()
        : asset('Nexxuz%20-%20Logo.png');
    $ogImageAlt = $portfolio->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($portfolio->created_at)->format('Y-m-d H:i:s') }}">
    <meta property="article:modified_time" content="{{ Carbon\Carbon::make($portfolio->updated_at)->format('Y-m-d H:i:s') }}">
@endsection

@section('schema')
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'CreativeWork',
            'name' => $portfolio->title,
            'datePublished' => optional($portfolio->created_at)->toIso8601String(),
            'dateModified' => optional($portfolio->updated_at)->toIso8601String(),
            'url' => $canonicalUrl,
            'description' => $metaDescription,
            'image' => $ogImage,
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endsection

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

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

                <div class="portfolio-content">
                    <div class="portfolio-meta">
                        <time datetime="{{ $portfolio->created_at }}">
                            {{ \Carbon\Carbon::make($portfolio->created_at)->format('l F j, Y H:i:s') }}
                            @if($portfolio->created_at != $portfolio->updated_at) <br/><span class="text-xs">Updated at: {{ \Carbon\Carbon::make($portfolio->updated_at)->format('l F j, Y H:i:s') }}</span> @endif
                        </time>
                    </div>

                    <h3 class="h3 portfolio-item-title">{{ $portfolio->title }}</h3>
                    <div class="portfolio-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({!! $portfolio->content !!});
        quill.disable();
    </script>
@endsection