<?php
declare(strict_types=1);

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

/* ================= VALIDATION ================= */
if (empty($_SESSION['employee_id'])) {
    header('Location: ' . ADMIN_BASE_URL . 'login.php');
    exit;
}

if (empty($_GET['id']) || !ctype_digit($_GET['id'])) {
    header('Location: ' . ADMIN_BASE_URL . 'home-sliders/list.php');
    exit;
}

$sliderId = (int) $_GET['id'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables('../partials/title-meta.php', ['title' => 'View Home Slider']); ?>
<?php include '../partials/head-css.php'; ?>

<!-- ================= INLINE CSS ================= -->
<style>
.image-box {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 3;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #ffffff;
}

.image-placeholder {
    color: #6c757d;
    font-size: 14px;
}
</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 Home Page Slider'
]); ?>

<div class="card shadow-sm border-0">
<div class="card-body">

<!-- ================= HEADER ================= -->
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="mb-1 fw-bold" id="title">-</h4>
        <p class="text-muted mb-0" id="subtitle">-</p>
    </div>
    <span id="statusBadge"
          class="badge bg-secondary rounded-pill px-3 py-2">
        -
    </span>
</div>

<hr>

<!-- ================= IMAGES ================= -->
<div class="row g-4 mb-4">

<div class="col-md-6">
    <label class="text-muted small mb-2 d-block">
        Desktop Image
    </label>

    <div class="image-box">
        <img id="desktopImage"
             class="image-thumb d-none"
             alt="Desktop Image">
        <div id="desktopPlaceholder"
             class="image-placeholder">
            No image
        </div>
    </div>
</div>

<div class="col-md-6">
    <label class="text-muted small mb-2 d-block">
        Mobile Image
    </label>

    <div class="image-box">
        <img id="mobileImage"
             class="image-thumb d-none"
             alt="Mobile Image">
        <div id="mobilePlaceholder"
             class="image-placeholder">
            No image
        </div>
    </div>
</div>

</div>

<!-- ================= DETAILS ================= -->
<div class="row g-3 mb-4">

<div class="col-md-4">
    <div class="p-3 border rounded h-100">
        <small class="text-muted">Priority</small>
        <div class="fw-semibold fs-5" id="priority">-</div>
    </div>
</div>

<div class="col-md-4">
    <div class="p-3 border rounded h-100">
        <small class="text-muted">CTA Button Text</small>
        <div class="fw-semibold" id="linkText">-</div>
    </div>
</div>

<div class="col-md-4">
    <div class="p-3 border rounded h-100">
        <small class="text-muted">CTA URL</small>
        <div>
            <a href="#" id="linkUrl" target="_blank">-</a>
        </div>
    </div>
</div>

</div>

<!-- ================= META ================= -->
<div class="text-muted small">
    Created at:
    <span id="createdAt">-</span>
</div>

</div>

<!-- ================= FOOTER ================= -->
<div class="card-footer bg-white border-0 d-flex justify-content-between">
    <a href="<?= ADMIN_BASE_URL ?>home-sliders/list.php"
       class="btn btn-light">
        ← Back
    </a>

    <a href="<?= ADMIN_BASE_URL ?>home-sliders/edit.php?id=<?= $sliderId ?>"
       class="btn btn-warning">
        <i class="bi bi-pencil-square me-1"></i>
        Edit Slider
    </a>
</div>

</div>

</div>
</main>

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

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

<!-- ================= JS ================= -->
<script>
const SLIDER_ID = <?= $sliderId ?>;
const API_LIST = "<?= ADMIN_BASE_URL ?>api/home-sliders/list.php";

fetch(API_LIST, { credentials: 'include' })
.then(r => r.json())
.then(res => {
    if (res.status !== 'success') return;

    const slider = res.data.sliders.find(s => s.id == SLIDER_ID);
    if (!slider) {
        window.location.href =
            "<?= ADMIN_BASE_URL ?>home-sliders/list.php";
        return;
    }

    document.getElementById('title').textContent =
        slider.title ?? '-';

    document.getElementById('subtitle').textContent =
        slider.subtitle ?? '-';

    document.getElementById('priority').textContent =
        slider.priority;

    document.getElementById('linkText').textContent =
        slider.link_text ?? '-';

    const linkUrl = document.getElementById('linkUrl');
    if (slider.link_url) {
        linkUrl.href = slider.link_url;
        linkUrl.textContent = slider.link_url;
    } else {
        linkUrl.textContent = '-';
    }

    const badge = document.getElementById('statusBadge');
    badge.textContent =
        slider.is_active == 1 ? 'Active' : 'Inactive';
    badge.className =
        'badge rounded-pill px-3 py-2 bg-' +
        (slider.is_active == 1 ? 'success' : 'secondary');

    if (slider.desktop_image_url) {
        const d = document.getElementById('desktopImage');
        d.src = slider.desktop_image_url;
        d.classList.remove('d-none');
        document.getElementById('desktopPlaceholder').style.display = 'none';
    }

    if (slider.mobile_image_url) {
        const m = document.getElementById('mobileImage');
        m.src = slider.mobile_image_url;
        m.classList.remove('d-none');
        document.getElementById('mobilePlaceholder').style.display = 'none';
    }

    document.getElementById('createdAt').textContent =
        slider.created_at ?? '-';
});
</script>

</body>
</html>
