<?php
declare(strict_types=1);

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

/* ================= ROLE CHECK ================= */
if (empty($_SESSION['employee_id'])) {
    header('Location: ' . ADMIN_BASE_URL . 'login.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables('../partials/title-meta.php', ['title' => 'Add Home Slider']); ?>
<?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' => 'CMS',
    'title'     => 'Add Home Page Slider'
]); ?>

<form id="sliderForm" enctype="multipart/form-data">

<div class="card">
<div class="card-body">

<div class="row g-3">

<!-- TITLE -->
<div class="col-md-6">
    <label class="form-label">Title</label>
    <input type="text" name="title" class="form-control"
           placeholder="Optional slider title">
</div>

<!-- SUBTITLE -->
<div class="col-md-6">
    <label class="form-label">Subtitle</label>
    <input type="text" name="subtitle" class="form-control"
           placeholder="Optional subtitle">
</div>

<!-- DESKTOP IMAGE -->
<div class="col-md-6">
    <label class="form-label">
        Desktop Image <span class="text-danger">*</span>
    </label>
    <input type="file" name="desktop_image" class="form-control"
           accept="image/*" required>
    <small class="text-muted">Recommended: 1920×600</small>
</div>

<!-- MOBILE IMAGE -->
<div class="col-md-6">
    <label class="form-label">
        Mobile Image <span class="text-danger">*</span>
    </label>
    <input type="file" name="mobile_image" class="form-control"
           accept="image/*" required>
    <small class="text-muted">Recommended: 750×900</small>
</div>

<!-- PRIORITY -->
<div class="col-md-3">
    <label class="form-label">
        Priority <span class="text-danger">*</span>
    </label>
    <input type="number" name="priority" class="form-control"
           min="1" required>
    <small class="text-muted">Lower number = higher priority</small>
</div>

<!-- STATUS -->
<div class="col-md-3">
    <label class="form-label">Status</label>
    <select name="is_active" class="form-select">
        <option value="1">Active</option>
        <option value="0">Inactive</option>
    </select>
</div>

<!-- LINK URL -->
<div class="col-md-6">
    <label class="form-label">CTA Link URL</label>
    <input type="url" name="link_url" class="form-control"
           placeholder="https://example.com">
</div>

<!-- LINK TEXT -->
<div class="col-md-6">
    <label class="form-label">CTA Button Text</label>
    <input type="text" name="link_text" class="form-control"
           placeholder="Shop Now">
</div>

</div>

</div>

<div class="card-footer d-flex justify-content-between">
    <a href="<?= ADMIN_BASE_URL ?>home-sliders/list.php"
       class="btn btn-light">
        Back
    </a>
    <button type="submit" class="btn btn-success">
        <i class="bi bi-save me-1"></i> Save Slider
    </button>
</div>

</div>
</form>

</div>
</main>

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

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

<script>
const API_CREATE = "<?= ADMIN_BASE_URL ?>api/home-sliders/create.php";

document.getElementById('sliderForm').addEventListener('submit', function (e) {
    e.preventDefault();

    const form = this;
    const formData = new FormData(form);

    fetch(API_CREATE, {
        method: 'POST',
        credentials: 'include',
        body: formData
    })
    .then(r => r.json())
    .then(res => {
        if (res.status !== 'success') {
            alert(res.message || 'Failed to create slider');
            return;
        }

        window.location.href =
            "<?= ADMIN_BASE_URL ?>home-sliders/list.php";
    })
    .catch(() => alert('Server error'));
});
</script>

</body>
</html>
