<?php
declare(strict_types=1);

require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../security/auth_guard.php';

$blogId = (int)($_GET['id'] ?? 0);
if ($blogId <= 0) {
    header('Location: ' . ADMIN_BASE_URL . 'blogs/list.php');
    exit;
}

include __DIR__ . '/../partials/main.php';
?>

<head>
<?php includeFileWithVariables(__DIR__ . '/../partials/title-meta.php', ['title' => 'View Blog']); ?>
<?php include __DIR__ . '/../partials/head-css.php'; ?>

<link rel="stylesheet" href="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.css">
</head>

<body>
<div id="layout-wrapper">

<?php
include __DIR__ . '/../partials/header.php';
include __DIR__ . '/../partials/sidebar.php';
include __DIR__ . '/../partials/horizontal.php';
?>

<main class="app-wrapper">
<div class="container-fluid">

<?php includeFileWithVariables(__DIR__ . '/../partials/page-title.php', [
    'title_sub' => 'CMS',
    'title'     => 'View Blog'
]); ?>

<!-- ACTIONS -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="<?= ADMIN_BASE_URL ?>blogs/list.php" class="btn btn-light">← Back</a>
    <a href="<?= ADMIN_BASE_URL ?>blogs/edit.php?id=<?= $blogId ?>" class="btn btn-primary">Edit Blog</a>
</div>

<div class="row">

<!-- IMAGE -->
<div class="col-xl-5">
<div class="card">
<div class="card-body">
<div class="swiper blogSwiper">
    <div class="swiper-wrapper" id="blogImages"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>

<!-- SUMMARY -->
<div class="col-xl-7">
<div class="card">
<div class="card-body">

<h3 id="blogTitle"></h3>
<p class="text-muted"><?= APP_ROOT ?>/blog/<span id="blogSlug"></span></p>

<div class="row mt-3">
    <div class="col-md-6"><strong>Status:</strong> <span id="blogStatus"></span></div>
    <div class="col-md-6"><strong>Approval:</strong> <span id="approvalStatus"></span></div>

    <div class="col-md-6 mt-2"><strong>Published At:</strong> <span id="publishedAt"></span></div>
    <div class="col-md-6 mt-2"><strong>Published By:</strong> <span id="publishedBy"></span></div>

    <div class="col-md-6 mt-2"><strong>Created At:</strong> <span id="createdAt"></span></div>
    <div class="col-md-6 mt-2"><strong>Updated At:</strong> <span id="updatedAt"></span></div>
</div>

<hr>

<p><strong>Excerpt:</strong></p>
<p id="blogExcerpt"></p>

<p><strong>Categories:</strong> <span id="blogCategories"></span></p>
<p><strong>Tags:</strong> <span id="blogTags"></span></p>

</div>
</div>
</div>

</div>

<!-- TABS -->
<div class="card mt-4">
<div class="card-body">

<ul class="nav nav-tabs nav-tabs-custom nav-primary">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#tab-content">Content</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-seo">SEO</a>
    </li>
</ul>

<div class="tab-content mt-4">

<div class="tab-pane fade show active" id="tab-content">
    <div id="blogContent"></div>
</div>

<div class="tab-pane fade" id="tab-seo">
    <p><strong>Meta Title:</strong> <span id="metaTitle"></span></p>
    <p><strong>Meta Keywords:</strong> <span id="metaKeywords"></span></p>
    <p><strong>Description:</strong> <span id="metaDescription"></span></p>
    <p><strong>SEO Schema:</strong></p>
    <pre class="bg-light p-2 small" id="seoSchema"></pre>
    <p><strong>AI SEO Content:</strong></p>
    <pre class="bg-light p-2 small" id="aiSeoContent"></pre>
</div>

</div>
</div>
</div>

</div>
</main>

<?php include __DIR__ . '/../partials/footer.php'; ?>
</div>

<?php include __DIR__ . '/../partials/vendor-scripts.php'; ?>
<script src="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.js"></script>

<script>
const API_URL = "<?= APP_ROOT ?>/admin/api/blogs/view.php?id=<?= $blogId ?>";
const APP_ROOT_URL = "<?= APP_ROOT ?>";

fetch(API_URL)
.then(r => r.json())
.then(({ data }) => {

    const b = data.blog;

    blogTitle.textContent = b.title;
    blogSlug.textContent = b.slug;
    blogStatus.textContent = b.status;
    approvalStatus.textContent = data.approval.approval_status || '-';

    publishedAt.textContent = b.published_at || '-';
    publishedBy.textContent = b.published_by_name || '-';

    createdAt.textContent = b.created_at || '-';
    updatedAt.textContent = b.updated_at || '-';

    blogExcerpt.textContent = b.excerpt || '-';
    blogCategories.textContent = data.categories.map(c=>c.name).join(', ') || '-';
    blogTags.textContent = data.tags.map(t=>t.name).join(', ') || '-';

    blogContent.innerHTML = b.content || '<em>No content</em>';

    metaTitle.textContent = data.seo?.meta_title || '-';
    metaKeywords.textContent = data.seo?.meta_keywords || '-';
    metaDescription.textContent = data.seo?.meta_description || '-';
    seoSchema.textContent = data.seo?.seo_schema || '-';
    aiSeoContent.textContent = data.seo?.ai_seo_content || '-';

    /* IMAGE */
    const wrap = document.getElementById('blogImages');

    if (b.featured_image) {
        wrap.innerHTML = `
            <div class="swiper-slide">
                <img class="img-fluid rounded"
                     src="${APP_ROOT_URL}${b.featured_image}">
            </div>`;
    } else {
        wrap.innerHTML = `<div class="text-muted p-5 text-center">No image</div>`;
    }

    new Swiper('.blogSwiper', { navigation:true });
});
</script>

</body>
</html>
