@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" />
@endsection

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Portfolio Entry</h2>
        </header>
        <section>
            <span class="float-end">
                <a href="{{ route('admin.portfolio.index') }}" class="float-left me-3"><i class="fa-solid fa-left-long"> Back</i></a>
                <a href="{{ route('admin.portfolio.edit', $portfolio) }}" class="float-end"><i class="fa-regular fa-pen-to-square"> Edit</i></a>
            </span>
            <div class="container">
                <div class="form-group mb-3">
                    <label for="slug">{{ __('Slug') }}</label>
                    <input id="slug" name="slug" class="form-control" type="text" disabled value="{{ $portfolio->slug }}">
                </div>
                <div class="form-group mb-3">
                    <label for="title">{{ __('Title') }}</label>
                    <input id="title" name="title" class="form-control" disabled value="{{ $portfolio->title }}">
                </div>
                <div class="form-group mb-3">
                    <label for="published_at">{{ __('Published At') }}</label>
                    <input type="text" class="form-control" id="published_at" name="published_at" @if($portfolio->published_at != 0) disabled value="{{ $portfolio->published_at }}" @endif>
                </div>
                <div class="form-group mb-3">
                    <label for="meta_title">{{ __('Meta Title') }}</label>
                    <input id="meta_title" name="meta_title" class="form-control" type="text" disabled value="{{ $portfolio->meta_title }}">
                </div>
                <div class="form-group mb-3">
                    <label for="meta_description">{{ __('Meta Description') }}</label>
                    <input id="meta_description" name="meta_description" class="form-control" type="text" disabled value="{{ $portfolio->meta_description }}">
                </div>
                <div class="form-group mb-3">
                    <label for="canonical_url">{{ __('Canonical URL') }}</label>
                    <input id="canonical_url" name="canonical_url" class="form-control" type="text" disabled value="{{ $portfolio->canonical_url }}">
                </div>
                <div class="form-group mb-3">
                    <label for="thumbnail" class="form-label">Thumbnail Image</label>
                    @if(!is_null($portfolio->getMedia('portfolio')->first()))
                        <img src="{{ $portfolio->getMedia('portfolio')->first()->getUrl() }}" alt="{{ $portfolio->title }}">
                    @endif
                </div>
                <div class="form-group mb-3">
                    <label>{{ __('Content') }}</label>
                    <div id="content" class="form-control border-1 border-dark scroll-auto">
                    </div>
                </div>
            </div>
        </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'
        });
        @if($portfolio->content)
            quill.setContents({!! $portfolio->content !!});
        @endif
        quill.disable();
    </script>
@endsection