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

<form action="../settings_process.php" method="POST">
    <div class="control-box">
        <h4 style="color:var(--accent); margin-top:0;">FONT SIZES</h4>
        <div class="device-btns">
            <div class="dev-btn active" onclick="showDev('mobile', this)">MOBILE</div>
            <div class="dev-btn" onclick="showDev('tablet', this)">TABLET</div>
            <div class="dev-btn" onclick="showDev('pc', this)">PC</div>
        </div>
        <div id="dev-mobile" class="dev-group active">
            <label>Mobile: Cat Size</label><input type="number" name="fs_cat_mob" value="<?= $theme['fs_cat_mob'] ?>">
            <label>Mobile: Card Size</label><input type="number" name="fs_card_mob" value="<?= $theme['fs_card_mob'] ?>">
        </div>
        <div id="dev-tablet" class="dev-group">
            <label>Tablet: Cat Size</label><input type="number" name="fs_cat_tab" value="<?= $theme['fs_cat_tab'] ?>">
            <label>Tablet: Card Size</label><input type="number" name="fs_card_tab" value="<?= $theme['fs_card_tab'] ?>">
        </div>
        <div id="dev-pc" class="dev-group">
            <label>PC: Cat Size</label><input type="number" name="fs_cat_pc" value="<?= $theme['fs_cat_pc'] ?>">
            <label>PC: Card Size</label><input type="number" name="fs_card_pc" value="<?= $theme['fs_card_pc'] ?>">
        </div>
    </div>

    <div class="control-box">
        <label>Active Effect (1-30)</label>
        <select name="active_effect">
            <option value="none">Disable</option>
            <optgroup label="Nature">
                <option value="snow" <?=$theme['active_effect']=='snow'?'selected':''?>>1. Snowfall</option>
                <option value="rain" <?=$theme['active_effect']=='rain'?'selected':''?>>2. Heavy Rain</option>
                <option value="lightning" <?=$theme['active_effect']=='lightning'?'selected':''?>>3. Lightning Storm</option>
                <option value="bubbles" <?=$theme['active_effect']=='bubbles'?'selected':''?>>4. Rising Bubbles</option>
                <option value="leaves" <?=$theme['active_effect']=='leaves'?'selected':''?>>5. Falling Leaves</option>
                <option value="clouds" <?=$theme['active_effect']=='clouds'?'selected':''?>>6. Moving Clouds</option>
                <option value="fireflies" <?=$theme['active_effect']=='fireflies'?'selected':''?>>7. Golden Fireflies</option>
            </optgroup>
            <optgroup label="Sci-Fi">
                <option value="matrix" <?=$theme['active_effect']=='matrix'?'selected':''?>>8. Matrix Code</option>
                <option value="cyber" <?=$theme['active_effect']=='cyber'?'selected':''?>>9. Cyber Grid</option>
                <option value="stars" <?=$theme['active_effect']=='stars'?'selected':''?>>10. Starfield Warp</option>
                <option value="particles" <?=$theme['active_effect']=='particles'?'selected':''?>>11. Connected Particles</option>
                <option value="wormhole" <?=$theme['active_effect']=='wormhole'?'selected':''?>>12. Wormhole</option>
                <option value="galaxy" <?=$theme['active_effect']=='galaxy'?'selected':''?>>13. Galaxy Spiral</option>
            </optgroup>
            <optgroup label="Fun & Dark">
                <option value="confetti" <?=$theme['active_effect']=='confetti'?'selected':''?>>14. Celebration Confetti</option>
                <option value="balloons" <?=$theme['active_effect']=='balloons'?'selected':''?>>15. Balloons</option>
                <option value="hearts" <?=$theme['active_effect']=='hearts'?'selected':''?>>16. Floating Hearts</option>
                <option value="kiss" <?=$theme['active_effect']=='kiss'?'selected':''?>>17. Kisses</option>
                <option value="emojis" <?=$theme['active_effect']=='emojis'?'selected':''?>>18. Random Emojis</option>
                <option value="fire" <?=$theme['active_effect']=='fire'?'selected':''?>>19. Hell Fire</option>
                <option value="blood" <?=$theme['active_effect']=='blood'?'selected':''?>>20. Blood Drip</option>
                <option value="skull" <?=$theme['active_effect']=='skull'?'selected':''?>>21. Floating Skulls</option>
                <option value="glitch" <?=$theme['active_effect']=='glitch'?'selected':''?>>22. Screen Glitch</option>
                <option value="warning" <?=$theme['active_effect']=='warning'?'selected':''?>>23. Warning Signs</option>
            </optgroup>
            <optgroup label="Abstract">
                <option value="neon_pulse" <?=$theme['active_effect']=='neon_pulse'?'selected':''?>>24. Neon Pulse</option>
                <option value="waves" <?=$theme['active_effect']=='waves'?'selected':''?>>25. Sine Waves</option>
                <option value="hex" <?=$theme['active_effect']=='hex'?'selected':''?>>26. Hexagon Mesh</option>
                <option value="smoke" <?=$theme['active_effect']=='smoke'?'selected':''?>>27. Colored Smoke</option>
                <option value="bokeh" <?=$theme['active_effect']=='bokeh'?'selected':''?>>28. Bokeh Lights</option>
                <option value="lines" <?=$theme['active_effect']=='lines'?'selected':''?>>29. Connecting Lines</option>
                <option value="sparkles" <?=$theme['active_effect']=='sparkles'?'selected':''?>>30. Magic Sparkles</option>
            </optgroup>
        </select>
        <label>Effect Color</label>
        <input type="color" name="effect_color" value="<?= $theme['effect_color'] ?>">
        <label>Animation Speed</label>
        <input type="range" name="effect_speed" min="0.1" max="5.0" step="0.1" value="<?= $theme['effect_speed'] ?>">
    </div>

    <div class="control-box">
        <label>Background Color</label><input type="color" name="bg_color" value="<?= $theme['bg_color'] ?>">
        <label>Navbar Color</label><input type="color" name="navbar_color" value="<?= $theme['navbar_color'] ?>">
        <label>Footer Color</label><input type="color" name="footer_color" value="<?= $theme['footer_color'] ?>">
        <label>Card Size</label>
        <select name="card_size">
            <option value="small" <?=$theme['card_size']=='small'?'selected':''?>>Small</option>
            <option value="medium" <?=$theme['card_size']=='medium'?'selected':''?>>Medium</option>
            <option value="large" <?=$theme['card_size']=='large'?'selected':''?>>Large</option>
        </select>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
            <div><label>Mobile Col</label><input type="number" name="col_mobile" value="<?= $theme['col_mobile'] ?>"></div>
            <div><label>PC Col</label><input type="number" name="col_desktop" value="<?= $theme['col_desktop'] ?>"></div>
        </div>
    </div>
    <button class="btn" name="update_settings">SAVE DESIGN</button>
</form>

<script>
function showDev(type, btn) {
    $('.dev-group').removeClass('active'); $('#dev-'+type).addClass('active');
    $('.dev-btn').removeClass('active'); $(btn).addClass('active');
}
</script>
<?php include 'footer.php'; ?>