<?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: sections-list.php');
    exit;
}

$db = Database::getInstance();

/* ================= LOAD SECTION ================= */
$stmt = $db->prepare("
    SELECT *
    FROM hospitality_product_sections
    WHERE id = :id
");
$stmt->execute(['id' => $id]);
$section = $stmt->fetch(PDO::FETCH_ASSOC);

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

<style>
.media-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
}
.media-box img,
.media-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.label-muted {
    font-size: .85rem;
    color: #6c757d;
}
.desc-box {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1rem;
}
</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' => 'Hospitality',
    'title'     => 'View Section'
]); ?>

<div class="row g-4">

<!-- ================= ROW 1 : MEDIA ================= -->
<div class="col-4">
<div class="card shadow-sm">
<div class="card-header"><strong>Section Media</strong></div>
<div class="card-body">

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

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

<!-- ================= ROW 2 : DETAILS ================= -->
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header"><strong>Section Details</strong></div>
<div class="card-body">

<div class="row g-3">

<div class="col-md-4">
<label class="label-muted">Section Title</label>
<p class="fw-semibold mb-0"><?= $section['section_title'] ?: '-' ?></p>
</div>

<div class="col-md-4">
<label class="label-muted">Section Key</label>
<p class="mb-0"><code><?= $section['section_key'] ?: '-' ?></code></p>
</div>

<div class="col-md-4">
<label class="label-muted">File Type</label>
<p class="mb-0"><?= $section['file_type'] ?></p>
</div>

<div class="col-md-3">
<label class="label-muted">Preview Type</label>
<p class="mb-0"><?= $section['preview_type'] ?></p>
</div>

<div class="col-md-3">
<label class="label-muted">Priority</label>
<p class="mb-0"><?= (int)$section['priority'] ?></p>
</div>

<div class="col-md-3">
<label class="label-muted">Status</label><br>
<span class="badge bg-<?= $section['status']==='Active'?'success':($section['status']==='Draft'?'warning':'secondary') ?>">
    <?= $section['status'] ?>
</span>
</div>

<div class="col-md-3">
<label class="label-muted">Approval</label><br>
<span class="badge bg-<?= $section['approval_status']==='Approved'?'success':($section['approval_status']==='Rejected'?'danger':'warning') ?>">
    <?= $section['approval_status'] ?>
</span>
</div>

<div class="col-md-6">
<label class="label-muted">Alt Text</label>
<p class="mb-0"><?= $section['alt_text'] ?: '-' ?></p>
</div>

<div class="col-md-6">
<label class="label-muted">Caption</label>
<p class="mb-0"><?= $section['caption'] ?: '-' ?></p>
</div>

</div>

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

<!-- ================= ROW 3 : Short DESCRIPTION ================= -->
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header"><strong>Short Description</strong></div>
<div class="card-body">
<div class="desc-box">
<?= $section['short_description'] ?: '<span class="text-muted">No short description available</span>' ?>
</div>
</div>
</div>
</div>
<!-- ================= ROW 3 : DESCRIPTION ================= -->
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header"><strong>Description</strong></div>
<div class="card-body">
<div class="desc-box">
<?= $section['description'] ?: '<span class="text-muted">No description available</span>' ?>
</div>
</div>
</div>
</div>

<!-- ================= ACTIONS ================= -->
<div class="col-12">
<div class="card">
<div class="card-body d-flex justify-content-between">
<a href="sections-list.php" class="btn btn-light">Back to List</a>
<a href="sections-edit.php?id=<?= $section['id'] ?>" class="btn btn-warning">
    <i class="bi bi-pencil-square me-1"></i> Edit Section
</a>
</div>
</div>
</div>

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

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

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