@extends('layouts.admin.app')
@section('title', 'Article Details')
@section('content')
<div class="nk-content detailPage">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">{{ __('labels.article_management') }}</h3>
                            <div class="nk-block-des text-soft">
                                <!-- breadcrumb @s -->
                                <nav>
                                    <ul class="breadcrumb breadcrumb-arrow">
                                        <li class="breadcrumb-item"><a
                                                href="{{route('admin.dashboard')}}">{{ __('labels.dashboard') }}</a>
                                        </li>
                                        <li class="breadcrumb-item"><a
                                                href="{{route('article.index')}}">{{ __('labels.article_list') }}</a>
                                        </li>
                                        <li class="breadcrumb-item active">{{ __('labels.article') }}
                                            {{ __('labels.details') }}</li>
                                    </ul>
                                </nav>
                                <!-- breadcrumb @e -->
                            </div>
                        </div><!-- .nk-block-head-content -->

                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            <div class="row gy-4">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.category') }}</label>
                                        <div class="form-control-wrap">
                                            {{ (!empty($article)) ? getCategoryName($article->articleCategories->pluck('category_id')->toArray(), 3) :'--' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.title') }}</label> <br>
                                        {{!empty($article)? $article->title : '--'}}
                                    </div>
                                </div>
                            </div>
                            <div class="row gy-4">
                                <div class="col-md-6">

                                    <div class="form-group">

                                        <label class="form-label">{{ __('labels.keyword') }}</label>

                                        <div class="tags-input-wrapper border-0 p-0">
                                            @if (!empty($article)) 
                                                @foreach ($article->articleKeyword as $keyword)
                                                    <span class="tag tag--orange">{{ $keyword->name }}</span>
                                                @endforeach
                                            @else
                                                --
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">{{ __('labels.article') }}
                                            {{ __('labels.image') }}</label>
                                        <div class="uploadPhoto upload_photo position-relative">
                                            <div class="img-box overflow-hidden w-100 h-100 imgBox">
                                                @if (!empty($article->article_image))
                                                    @php  
                                                    $imageUrl = "";
                                                    $imageUrl = getImageUrl($article->article_image, 'article_image'); 
                                                    @endphp
                                                @endif

                                                <img src="{{!empty($imageUrl)? $imageUrl : $imageUrl }}"
                                                    class="img-fluid" alt="user-img"
                                                    class="img-fluid border article_image" id="imagePreview"
                                                    onerror="this.src='{{asset('assets/images/placeholder.jpg')}}';">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">{{ __('labels.short') }} {{ __('labels.description') }}</label>
                                <div class="form-control-wrap">
                                    @if($article && isset($article->short_description))
                                    {!! $article->short_description !!}
                                    @else
                                    --
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">{{ __('labels.description') }}</label>
                                <div class="form-control-wrap">
                                    @if($article && isset($article->description))
                                    {!! $article->description !!}
                                    @else
                                    --
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">{{ __('labels.table_of_content') }}</label>
                                <div class="form-control-wrap">
                                    @if($article && isset($article->toc))
                                    {!! $article->toc !!}
                                    @else
                                    --
                                    @endif
                                </div>
                            </div>
                        </div><!-- .card-inner -->
                    </div>
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
</div>
@endsection