<?php
declare(strict_types=1);

require_once __DIR__ . '/../security/auth_guard_web.php';
require_once __DIR__ . '/../partials/main.php';

$productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($productId <= 0) {
    die('Invalid product id');
}

$sleepMap = [
    1 => 'Super Soft',
    2 => 'Soft',
    3 => 'Medium Soft',
    4 => 'Medium Firm',
    5 => 'Firm',
    6 => 'Extra Firm'
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables('../partials/title-meta.php', ['title' => 'View Retail Product']); ?>
<?php include '../partials/head-css.php'; ?>
</head>

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

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

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

<?php includeFileWithVariables('../partials/page-title.php', [
    'title_sub' => 'Catalog',
    'title'     => 'View Retail Product'
]); ?>

<div class="row">

<!-- ================= LEFT ================= -->
<div class="col-xl-8">

<!-- CORE -->
<div class="card">
<div class="card-header d-flex justify-content-between">
<h5>Product Details</h5>
<a href="list.php" class="btn btn-success btn-sm">← Back to List</a>
</div>

<div class="card-body">

<table class="table table-bordered">
<tr><th width="30%">Product Name</th><td id="v_product_name"></td></tr>
<tr><th>Slug</th><td id="v_slug"></td></tr>
<tr><th>Category ID</th><td id="v_category"></td></tr>
<tr><th>Primary Sleep</th><td id="v_primary_sleep"></td></tr>
<tr><th>Secondary Sleep</th><td id="v_secondary_sleep"></td></tr>
<tr><th>Short Description</th><td id="v_short_description"></td></tr>
<tr>
<th>Brochure</th>
<td>
<a id="v_brochure" target="_blank" class="btn btn-sm btn-outline-primary">
Download PDF
</a>
</td>
</tr>
</table>

<div class="mt-3">
<h6>Full Description</h6>
<div id="v_full_description" class="border rounded p-3"></div>
</div>

</div>
</div>

<!-- VARIANTS -->
<div class="card mt-3">
<div class="card-header"><h6>Variants</h6></div>
<div class="card-body">
<table class="table table-sm">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Firmness</th>
<th>Thickness</th>
<th>MRP</th>
<th>Selling</th>
<th>Status</th>
</tr>
</thead>
<tbody id="variantRows"></tbody>
</table>
</div>
</div>

<!-- SECTIONS -->
<div class="card mt-3">
<div class="card-header"><h6>Sections</h6></div>
<div class="card-body">
<div id="sectionList" class="row g-2"></div>
</div>
</div>

</div>

<!-- ================= RIGHT ================= -->
<div class="col-xl-4">

<!-- SEO -->
<div class="card">
<div class="card-header"><h6>SEO Details</h6></div>
<div class="card-body">

<table class="table table-bordered">
<tr><th>Meta Title</th><td id="v_meta_title"></td></tr>
<tr><th>Meta Keywords</th><td id="v_meta_keywords"></td></tr>
<tr><th>Meta Description</th><td id="v_meta_description"></td></tr>
</table>

<div class="mt-2">
<h6>SEO Schema (As-Is)</h6>
<textarea id="v_seo_schema"
          class="form-control"
          rows="8"
          readonly
          style="font-family: monospace;"></textarea>
</div>

<div class="mt-2">
<h6>AI SEO Content</h6>
<div id="v_ai_seo_content" class="border rounded p-2 small"></div>
</div>

</div>
</div>

<!-- IMAGES -->
<div class="card mt-3">
<div class="card-header"><h6>Images</h6></div>
<div class="card-body">
<div id="imageList" class="row g-2"></div>
</div>
</div>

</div>
</div>

</div>
</main>

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

<?php include '../partials/vendor-scripts.php'; ?>

<script>
const ADMIN = "<?= ADMIN_BASE_URL ?>";
const APP_BASE = ADMIN.replace('/admin/', '/');
const productId = <?= $productId ?>;
const sleepMap = <?= json_encode($sleepMap) ?>;

/* LOAD PRODUCT */
fetch(`${ADMIN}api/retail-products/view.php?id=${productId}`)
.then(r => r.json())
.then(r => {

    const d = r.data;

    /* CORE */
    v_product_name.innerText = d.product.product_name;
    v_slug.innerText = d.product.slug;
    v_category.innerText = d.product.category_id;

    const ps = d.product.primary_sleep_id;
    const ss = d.product.secondary_sleep_id;

    v_primary_sleep.innerText = ps
        ? `${ps} – ${sleepMap[ps]}`
        : '-';

    v_secondary_sleep.innerText = ss
        ? `${ss} – ${sleepMap[ss]}`
        : '-';

    v_short_description.innerText = d.product.short_description || '-';
    v_full_description.innerHTML = d.product.full_description || '-';
    v_brochure.href = APP_BASE + d.product.brochure_file;

    /* SEO */
    v_meta_title.innerText = d.seo.meta_title || '-';
    v_meta_keywords.innerText = d.seo.meta_keywords || '-';
    v_meta_description.innerText = d.seo.meta_description || '-';
    document.getElementById('v_seo_schema').value =
        d.seo.seo_schema || '';
    v_ai_seo_content.innerText = d.seo.ai_seo_content || '-';

    /* VARIANTS */
    if (!d.variants.length) {
        variantRows.innerHTML =
            `<tr><td colspan="7" class="text-muted text-center">No variants</td></tr>`;
    } else {
        d.variants.forEach(v => {
            variantRows.innerHTML += `
            <tr>
                <td>${v.variant_name}</td>
                <td>${v.size}</td>
                <td>${v.firmness}</td>
                <td>${v.thickness || '-'}</td>
                <td>${v.mrp}</td>
                <td>${v.selling_price}</td>
                <td>${v.status}</td>
            </tr>`;
        });
    }

    /* SECTIONS */
    if (!d.sections.length) {
        sectionList.innerHTML = `<div class="text-muted">No sections</div>`;
    } else {
        d.sections.forEach(s => {
            sectionList.innerHTML += `
            <div class="col-12 border rounded p-2">
                <strong>${s.section_title || '(No title)'}</strong>
                <div class="small text-muted">
                    ${s.file_type} | ${s.preview_type} | Priority ${s.priority}
                </div>
                <div class="mt-1">
                    <span class="badge bg-info">${s.status}</span>
                    <span class="badge bg-secondary">${s.approval_status}</span>
                </div>
            </div>`;
        });
    }

    /* IMAGES */
    if (!d.images.length) {
        imageList.innerHTML = `<div class="text-muted">No images</div>`;
    } else {
        d.images.forEach(img => {
            imageList.innerHTML += `
            <div class="col-12 border rounded p-2">
                <img src="${APP_BASE}${img.image_path}"
                     class="img-fluid mb-1">
                <div class="small"><b>ALT:</b> ${img.alt_text || '-'}</div>
                <div class="small"><b>Caption:</b> ${img.caption || '-'}</div>
            </div>`;
        });
    }
});
</script>

</body>
</html>
