@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('dash_site.blog_details') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.blog.index') }}" class="text-muted text-hover-primary">{{ trans('dash_site.blog') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ \Illuminate\Support\Str::limit($blog->title, 40) }}</li>
            </ul>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.blog.index') }}" class="btn btn-sm btn-light">{{ trans('dash_site.Back') }}</a>
            <a href="{{ route('admin.blog.edit', $blog->id) }}" class="btn btn-sm btn-warning"><i class="bi bi-pencil"></i>{{ trans('forms.edite_btn') }}</a>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="d-flex flex-column flex-lg-row gap-7">
            {{-- Aside: image and facts --}}
            <div class="w-100 w-lg-350px flex-shrink-0">
                <div class="card card-flush mb-7">
                    <div class="card-body p-5">
                        <div class="rounded mb-6" style="height: 220px; background: url('{{ $blog->main_image_path ?: asset('assets/media/svg/files/blank-image.svg') }}') center / cover no-repeat;"></div>

                        <div class="mb-6" id="blogStatus">
                            @include('dashboard.admin.partials.status-switch', ['url' => route('admin.blog.toggle-status', $blog->id), 'active' => $blog->is_active])
                        </div>

                        @foreach ([
                            ['bi-tag', trans('dash_site.category'), $blog->category?->name ?? trans('dash_site.no_category')],
                            ['bi-calendar3', trans('dash_site.date_at'), $blog->date_at],
                            ['bi-person', trans('dash_site.publisher'), $blog->publisher],
                            ['bi-images', trans('dash_site.images'), $blog->images->count()],
                            ['bi-clock-history', trans('dash_site.updated_at'), $blog->updated_at?->format('Y-m-d')],
                        ] as [$icon, $label, $value])
                            <div class="d-flex align-items-center py-3 border-bottom border-gray-200">
                                <i class="bi {{ $icon }} fs-4 text-primary me-3"></i>
                                <span class="text-muted fw-semibold flex-grow-1">{{ $label }}</span>
                                <span class="fw-bold text-gray-800" dir="auto">{{ $value }}</span>
                            </div>
                        @endforeach

                        @if ($blog->is_active)
                            <a href="{{ route('blog.show', $blog) }}" target="_blank" rel="noopener" class="btn btn-light-primary w-100 mt-6"><i class="bi bi-box-arrow-up-right"></i>{{ trans('dash_site.about_view_site') }}</a>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Main: content per language, gallery, SEO --}}
            <div class="flex-grow-1">
                <div class="card card-flush">
                    <div class="card-header card-header-stretch">
                        <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-6 fw-bold" role="tablist">
                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#blog_ar">العربية</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#blog_en">English</a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#blog_gallery">{{ trans('dash_site.images') }} <span class="badge badge-light ms-1">{{ $blog->images->count() }}</span></a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#blog_seo">{{ trans('dash_site.seo_data') }}</a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            @foreach (['ar' => 'rtl', 'en' => 'ltr'] as $locale => $dir)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="blog_{{ $locale }}" dir="{{ $dir }}">
                                    <h2 class="fs-2 fw-bold text-gray-900 mb-5">{{ $blog->getTranslation('title', $locale, false) ?: '—' }}</h2>
                                    <div class="fs-6 text-gray-700 lh-lg">{!! nl2br(e($blog->getTranslation('description', $locale, false) ?: $blog->getTranslation('details', $locale, false))) !!}</div>
                                </div>
                            @endforeach

                            <div class="tab-pane fade" id="blog_gallery">
                                @if ($blog->images->isEmpty())
                                    <div class="text-center text-muted py-10"><i class="bi bi-images fs-3x d-block mb-3"></i>{{ trans('dash_site.no_images') }}</div>
                                @else
                                    <div class="row g-5">
                                        @foreach ($blog->images as $image)
                                            <div class="col-6 col-md-4">
                                                <a href="{{ $image->image_path }}" target="_blank" rel="noopener" class="d-block rounded overflow-hidden border">
                                                    <div style="height: 150px; background: url('{{ $image->image_path }}') center / cover no-repeat;"></div>
                                                </a>
                                                <div class="fs-7 text-muted mt-2">{{ $image->getTranslation('alt_text', app()->getLocale(), false) }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            <div class="tab-pane fade" id="blog_seo">
                                <div class="row g-7">
                                    <div class="col-md-4">
                                        <div class="rounded border" style="height: 160px; background: url('{{ $blog->seo_image_path ?: $blog->main_image_path ?: asset('assets/media/svg/files/blank-image.svg') }}') center / cover no-repeat;"></div>
                                    </div>
                                    <div class="col-md-8">
                                        @foreach (['ar', 'en'] as $locale)
                                            <div class="mb-6" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                                <div class="badge badge-light mb-2">{{ strtoupper($locale) }}</div>
                                                <div class="fw-bold text-primary fs-5">{{ $blog->getTranslation('seo_title', $locale, false) ?: $blog->getTranslation('title', $locale, false) }}</div>
                                                <div class="text-gray-700 fs-7">{{ $blog->getTranslation('seo_description', $locale, false) ?: '—' }}</div>
                                                <div class="text-muted fs-8 mt-1"><i class="bi bi-hash"></i>{{ $blog->getTranslation('seo_keywords', $locale, false) ?: '—' }}</div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('dashboard.admin.partials.crud-table-js')
    <script>
        $(function () { CrudTable.bind($('#blogStatus'), null); });
    </script>
@endsection