<?php
declare(strict_types=1);

/* ================= AUTH ================= */
require_once __DIR__ . '/../security/auth_guard_web.php';
require_once __DIR__ . '/../partials/main.php';
require_once __DIR__ . '/../config/database.php';

/* ================= VALIDATION ================= */
$id = (int) ($_GET['id'] ?? 0);
if ($id <= 0) {
    header('Location: index.php');
    exit;
}

$db = Database::getInstance();

$stmt = $db->prepare("
    SELECT
        s.*,
        p.product_name
    FROM retail_product_sections s
    LEFT JOIN retail_products p ON p.id = s.product_id
    WHERE s.id = :id
");
$stmt->execute(['id' => $id]);
$section = $stmt->fetch();

if (!$section) {
    header('Location: index.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables('../partials/title-meta.php', ['title' => 'View Section']); ?>
<?php include '../partials/head-css.php'; ?>

<style>
.info-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.info-value {
    font-weight: 600;
}
.media-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.media-box img,
.media-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
</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' => 'CMS',
    'title'     => 'View Product Section'
]); ?>

<div class="row g-4">

<!-- ================= MEDIA CARD ================= -->
<div class="col-lg-6">
<div class="card h-100 shadow-sm">
<div class="card-header">
    <strong>Section Media</strong>
</div>
<div class="card-body">

<div class="media-box mb-3">
<?php if ($section['file_type'] === 'Image'): ?>
    <img src="<?= $section['file_path'] ?>" alt="">
<?php else: ?>
    <?php if ($section['thumbnail_path']): ?>
        <img src="<?= $section['thumbnail_path'] ?>" alt="">
    <?php else: ?>
        <video src="<?= $section['file_path'] ?>" controls></video>
    <?php endif; ?>
<?php endif; ?>
</div>

<?php if ($section['file_type'] === 'Video'): ?>
    <video src="<?= $section['file_path'] ?>" controls class="w-100 rounded"></video>
<?php endif; ?>

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

<!-- ================= DETAILS CARD ================= -->
<div class="col-lg-6">
<div class="card shadow-sm h-100">
<div class="card-header">
    <strong>Section Details</strong>
</div>
<div class="card-body">

<div class="row g-3">

<div class="col-md-6">
    <div class="info-label">Product</div>
    <div class="info-value"><?= htmlspecialchars($section['product_name']) ?></div>
</div>

<div class="col-md-6">
    <div class="info-label">Section Key</div>
    <code><?= htmlspecialchars($section['section_key']) ?></code>
</div>

<div class="col-md-12">
    <div class="info-label">Section Title</div>
    <div class="info-value"><?= $section['section_title'] ?: '-' ?></div>
</div>

<div class="col-md-4">
    <div class="info-label">Type</div>
    <div class="info-value"><?= $section['file_type'] ?></div>
</div>

<div class="col-md-4">
    <div class="info-label">Preview</div>
    <div class="info-value"><?= $section['preview_type'] ?></div>
</div>

<div class="col-md-4">
    <div class="info-label">Priority</div>
    <div class="info-value"><?= $section['priority'] ?></div>
</div>

<div class="col-md-6">
    <div class="info-label">Status</div>
    <span class="badge bg-<?= $section['status'] === 'Active' ? 'success' : 'secondary' ?>">
        <?= $section['status'] ?>
    </span>
</div>

<div class="col-md-6">
    <div class="info-label">Approval</div>
    <span class="badge bg-<?= $section['approval_status'] === 'Approved' ? 'success' : 'warning' ?>">
        <?= $section['approval_status'] ?>
    </span>
</div>

<div class="col-md-12">
    <div class="info-label">Alt Text</div>
    <div><?= $section['alt_text'] ?: '-' ?></div>
</div>

<div class="col-md-12">
    <div class="info-label">Caption</div>
    <div><?= $section['caption'] ?: '-' ?></div>
</div>

</div>

</div>

<div class="card-footer text-end">
    <a href="sections-list.php" class="btn btn-light">Back</a>
    <a href="edit-section.php?id=<?= $section['id'] ?>" class="btn btn-warning">
        <i class="bi bi-pencil-square me-1"></i> Edit
    </a>
</div>

</div>
</div>

</div>
</main>

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

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