@extends('layouts.main')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header profile-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex gap-2">
                            <x-buttons.back-small name="blog" :route="route('blog.index')" />
                            @can('update', $blog)
                                <a href="{{ route('blog.edit', $blog) }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-edit me-1"></i> {{ __('general.edit') }}
                                </a>
                            @endcan
                        </div>
                    </div>
                </div>
                <div class="card-content p-1 m-1">
                    <div class="mb-4 text-center">
                        <div class="preview mx-auto">
                            <img src="{{ asset('media/blog/' . $blog['image']) }}" class="img-fluid shadow-sm" alt="Blog Image">
                        </div>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Slug</label>
                            <div class="form-control-plaintext">{{ $blog['slug'] }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Image</label>
                            <div class="form-control-plaintext">{{ $blog['image'] }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Publish At</label>
                            <div class="form-control-plaintext">{{ $blog['publish_at'] }}</div>
                        </div>
                    </div>
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="bg-light rounded p-3 h-100">
                                <h5 class="fw-semibold text-primary mb-3"><i class="bi bi-translate"></i> Indonesia</h5>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Title</label>
                                    <div class="form-control-plaintext">{{ $blog['translate']['id']['title'] }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Description</label>
                                    <div class="form-control-plaintext">{!! nl2br(e($blog['translate']['id']['description'])) !!}</div>
                                </div>
                                <div>
                                    <label class="form-label fw-bold">content</label>
                                    <div class="form-control-plaintext">{!! $blog['translate']['id']['content'] !!}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="bg-light rounded p-3 h-100">
                                <h5 class="fw-semibold text-success mb-3"><i class="bi bi-translate"></i> English</h5>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Title</label>
                                    <div class="form-control-plaintext">{{ $blog['translate']['en']['title'] }}</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Description</label>
                                    <div class="form-control-plaintext">{!! nl2br(e($blog['translate']['en']['description'])) !!}</div>
                                </div>
                                <div>
                                    <label class="form-label fw-bold">content</label>
                                    <div class="form-control-plaintext">{!! $blog['translate']['en']['content'] !!}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Category</label>
                            <div class="form-control-plaintext">
                                @php
                                    $cat = collect($blogCategory)->firstWhere('id', $blog['blog_category_id']);
                                    if ($cat) {
                                        echo $cat['translate']['id']['name'] . ' - ' . $cat['translate']['en']['name'];
                                    }
                                @endphp
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Tag</label>
                            <div class="form-control-plaintext">
                                @php
                                    $selectedTags = collect($blogTag)->filter(function($itemTag) use ($blog) {
                                        return in_array($itemTag['id'], $blog['tag'] ?? []);
                                    });
                                    $tagsArr = [];
                                    foreach ($selectedTags as $tag) {
                                        $tagsArr[] = $tag['translate']['id']['name'] . ' - ' . $tag['translate']['en']['name'];
                                    }
                                    echo implode(', ', $tagsArr);
                                @endphp
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- card -->
        </div>
    </div>
@endsection