<?php
declare(strict_types=1);

/**
 * ============================
 * BOOTSTRAP
 * ============================
 */
require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../security/auth_guard.php';

/**
 * Category ID
 */
$categoryId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($categoryId <= 0) {
    header('Location: ' . ADMIN_BASE_URL . 'retail-categories/index.php');
    exit;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables(__DIR__ . '/../partials/title-meta.php', ['title' => 'View Category']); ?>
<?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' => 'Catalog',
    'title'     => 'View Category'
]); ?>

<!-- ACTIONS -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="<?= ADMIN_BASE_URL ?>retail-products/categories.php"
       class="btn btn-light">
        ← Back to List
    </a>

    <a href="<?= ADMIN_BASE_URL ?>retail-products/edit-category.php?id=<?= $categoryId ?>"
       class="btn btn-primary">
        Edit Category
    </a>
</div>

<!-- IMAGE + SUMMARY -->
<div class="row">

<!-- IMAGE -->
<div class="col-xl-5">
<div class="card">
<div class="card-body">

<div class="swiper categorySwiper">
    <div class="swiper-wrapper" id="categoryImages"></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="categoryName"></h3>
<p class="text-muted mb-2">
<?= APP_ROOT ?><span id="slug"></span>
</p>

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

<hr>

<h6>Short Description</h6>
<p id="shortDescription"></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-details">
            Details
        </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">

<!-- DETAILS -->
<div class="tab-pane fade show active" id="tab-details">
    <h6>Description</h6>
    <div id="description"
         style="max-height:300px;overflow-y:auto;"></div>
</div>

<!-- SEO -->
<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>Meta 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 Summary:</strong></p>
    <pre class="bg-light p-2 small" id="aiSummary"></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 = "<?= ADMIN_BASE_URL ?>api/retail-categories/view.php?id=<?= $categoryId ?>";
const APP_ROOT = "<?= APP_ROOT ?>";

fetch(API_URL, { credentials: 'include' })
.then(r => r.json())
.then(res => {

    if (res.status !== 'success') {
        alert(res.message || 'Failed to load category');
        return;
    }

    const data = res.data;

    document.getElementById('categoryName').textContent = data.category_name;
    document.getElementById('slug').textContent = data.slug;
    document.getElementById('status').textContent = data.status;
    document.getElementById('createdAt').textContent = data.created_at;
    document.getElementById('updatedAt').textContent = data.updated_at;

    document.getElementById('shortDescription').textContent =
        data.short_description || '-';

    document.getElementById('description').innerHTML =
        data.description || '<em>No description available</em>';

    document.getElementById('metaTitle').textContent =
        data.meta_title || '-';

    document.getElementById('metaKeywords').textContent =
        data.meta_keywords || '-';

    document.getElementById('metaDescription').textContent =
        data.meta_description || '-';

    document.getElementById('seoSchema').textContent =
        data.seo_schema || '-';

    document.getElementById('aiSummary').textContent =
        data.ai_summary || '-';

    /* ================= IMAGE ================= */
    const imgWrap = document.getElementById('categoryImages');

    if (data.image_path) {
        imgWrap.innerHTML = `
            <div class="swiper-slide">
                <img class="img-fluid rounded"
                     style="max-height:360px;object-fit:cover;width:100%;"
                     src="${APP_ROOT}${data.image_path}"
                     alt="${data.image_alt || data.category_name}">
            </div>
        `;

        new Swiper('.categorySwiper', { navigation: true });

    } else {
        imgWrap.innerHTML = `
            <div class="text-muted text-center p-5">
                No image uploaded
            </div>
        `;
    }
})
.catch(() => {
    alert('Server error while loading category');
});
</script>

</body>
</html>
