<?php
// public facing page for customized clothing
require_once __DIR__ . '/helpers/database_helper.php';

$config = DatabaseHelper::loadJson('customized_clothing.json', []);
$slider = $config['slider'] ?? [];
$section = $config['section'] ?? [];
?>

<?php include __DIR__ . '/header.php'; ?>

<!-- Customized Clothing Slider -->
<?php if (!empty($slider['slides']) && is_array($slider['slides'])): ?>
<section class="hero">
    <div class="slider">
        <?php foreach ($slider['slides'] as $i => $s): ?>
            <div class="slide <?php echo $i === 0 ? 'active' : ''; ?>">
                <img src="<?php echo htmlspecialchars($s['image']); ?>" alt="<?php echo htmlspecialchars($s['alt'] ?? ''); ?>" />
                <div class="hero-content">
                    <?php if (!empty($slider['title'])): ?>
                        <h1><?php echo htmlspecialchars($slider['title']); ?></h1>
                    <?php endif; ?>
                    <?php if (!empty($slider['description'])): ?>
                        <p><?php echo htmlspecialchars($slider['description']); ?></p>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; ?>
        <button class="slider-arrow prev" onclick="changeSlide(-1)">&#10094;</button>
        <button class="slider-arrow next" onclick="changeSlide(1)">&#10095;</button>
        <div class="slider-dots" id="sliderDots">
            <?php foreach ($slider['slides'] as $i => $s): ?>
                <div class="slider-dot <?php echo $i === 0 ? 'active' : ''; ?>" onclick="goToSlide(<?php echo $i; ?>)"></div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Second Section -->
<?php if (!empty($section)): ?>
<section class="customized-categories">
    <?php if (!empty($section['title'])): ?>
        <h2><?php echo htmlspecialchars($section['title']); ?></h2>
    <?php endif; ?>
    <?php if (!empty($section['description'])): ?>
        <p><?php echo htmlspecialchars($section['description']); ?></p>
    <?php endif; ?>

    <div class="categories-wrapper">
        <?php if (!empty($section['categories']) && is_array($section['categories'])): ?>
            <?php foreach ($section['categories'] as $cat): ?>
                <div class="cat-box" data-id="<?php echo $cat['id']; ?>">
                    <?php if (!empty($cat['image'])): ?>
                        <img src="<?php echo htmlspecialchars($cat['image']); ?>" alt="<?php echo htmlspecialchars($cat['title']); ?>" />
                    <?php endif; ?>
                    <h3><?php echo htmlspecialchars($cat['title']); ?></h3>
                    <p><?php echo htmlspecialchars($cat['description']); ?></p>
                </div>
                <?php if (!empty($cat['gallery']) && is_array($cat['gallery'])): ?>
                    <div class="cat-gallery" id="gallery-<?php echo $cat['id']; ?>" style="display:none;">
                        <?php foreach ($cat['gallery'] as $g): ?>
                            <img src="<?php echo htmlspecialchars($g['image']); ?>" alt="" />
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<script>
// reuse slider functions from index if present
function changeSlide(n) {
    var slides = document.querySelectorAll('.hero .slide');
    var currentIndex = Array.from(slides).findIndex(s => s.classList.contains('active'));
    if (currentIndex < 0) currentIndex = 0;
    slides[currentIndex].classList.remove('active');
    var next = (currentIndex + n + slides.length) % slides.length;
    slides[next].classList.add('active');
}
function goToSlide(n) {
    var slides = document.querySelectorAll('.hero .slide');
    slides.forEach(s => s.classList.remove('active'));
    slides[n].classList.add('active');
}

// category gallery toggle
var catBoxes = document.querySelectorAll('.cat-box');
catBoxes.forEach(function(el){
    el.addEventListener('click', function(){
        var id = this.getAttribute('data-id');
        var gal = document.getElementById('gallery-' + id);
        if (!gal) return;
        if (gal.style.display === 'none' || gal.style.display === '') {
            gal.style.display = 'block';
        } else {
            gal.style.display = 'none';
        }
    });
});
</script>

<?php include __DIR__ . '/footer.php'; ?>