<?php
session_start();
include "conn.php"; // Database Connection

// --- HANDLE SAVE ---
if (isset($_POST['save_mode'])) {
    $mode = intval($_POST['win_chance']);
    
    // Ensure value is between 0 and 100
    if($mode < 0) $mode = 0;
    if($mode > 100) $mode = 100;

    // Check if setting exists
    $check = $conn->query("SELECT * FROM game_settings WHERE setting_name = 'mines_win_chance'");
    
    if ($check->num_rows > 0) {
        $sql = "UPDATE game_settings SET setting_value = '$mode' WHERE setting_name = 'mines_win_chance'";
    } else {
        $sql = "INSERT INTO game_settings (setting_name, setting_value) VALUES ('mines_win_chance', '$mode')";
    }
    
    if ($conn->query($sql)) {
        $msg = "✅ Updated Successfully";
        $alertType = "success";
    } else {
        $msg = "❌ Error: " . $conn->error;
        $alertType = "error";
    }
}

// --- FETCH CURRENT SETTING ---
$q = $conn->query("SELECT setting_value FROM game_settings WHERE setting_name = 'mines_win_chance'");
$current_val = ($q->num_rows > 0) ? intval($q->fetch_assoc()['setting_value']) : 50;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mines Admin Pro</title>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #0f1923;
            --card-bg: #1b2632;
            --accent: #00ff88;
            --danger: #ff4d4d;
            --warning: #ffbd00;
            --text: #ffffff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; }

        body {
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .dashboard {
            background: var(--card-bg);
            width: 100%;
            max-width: 500px;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            border: 1px solid #2f3d4c;
            text-align: center;
        }

        h1 {
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 28px;
            margin-bottom: 30px;
            border-bottom: 2px solid #2f3d4c;
            padding-bottom: 15px;
        }

        /* PERCENTAGE DISPLAY */
        .percent-box {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 30px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 5px solid #2f3d4c;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
            background: #131a23;
        }

        .percent-val {
            font-size: 48px;
            font-weight: 800;
            color: var(--text);
        }
        
        .percent-label {
            position: absolute;
            bottom: 30px;
            font-size: 12px;
            color: #888;
            text-transform: uppercase;
        }

        /* SLIDER STYLING */
        .slider-container { margin-bottom: 30px; }
        
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 12px;
            background: #0f1923;
            border-radius: 6px;
            outline: none;
            border: 1px solid #444;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 28px;
            height: 28px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 15px var(--accent);
            border: 3px solid #fff;
        }

        /* PRESET BUTTONS */
        .presets {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            justify-content: center;
        }

        .preset-btn {
            background: #2f3d4c;
            border: 1px solid #444;
            color: #ccc;
            padding: 8px 15px;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s;
            flex: 1;
        }

        .preset-btn:hover { background: #3e4f61; }
        .preset-btn.kill { border-color: var(--danger); color: var(--danger); }
        .preset-btn.fair { border-color: var(--warning); color: var(--warning); }
        .preset-btn.win { border-color: var(--accent); color: var(--accent); }

        /* SAVE BUTTON */
        .save-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent);
            color: #000;
            font-size: 20px;
            font-weight: 800;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-transform: uppercase;
            box-shadow: 0 5px 0 #00b359;
            transition: 0.1s;
        }

        .save-btn:active {
            transform: translateY(3px);
            box-shadow: 0 2px 0 #00b359;
        }

        .message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 14px;
        }
        .msg-success { background: rgba(0, 255, 136, 0.1); color: var(--accent); border: 1px solid var(--accent); }
        .msg-error { background: rgba(255, 77, 77, 0.1); color: var(--danger); border: 1px solid var(--danger); }

    </style>
</head>
<body>

    <div class="dashboard">
        <h1>Mines Controller</h1>

        <form method="POST" id="controlForm">
            <div class="percent-box" id="circleBox">
                <span class="percent-val" id="dispVal"><?php echo $current_val; ?>%</span>
                <span class="percent-label">Win Chance</span>
            </div>

            <div class="slider-container">
                <input type="range" name="win_chance" id="winSlider" min="0" max="100" value="<?php echo $current_val; ?>" oninput="updateUI(this.value)">
            </div>

            <div class="presets">
                <div class="preset-btn kill" onclick="setSlider(0)">0% KILL</div>
                <div class="preset-btn" onclick="setSlider(30)">30%</div>
                <div class="preset-btn fair" onclick="setSlider(50)">50% FAIR</div>
                <div class="preset-btn" onclick="setSlider(80)">80%</div>
                <div class="preset-btn win" onclick="setSlider(100)">100% WIN</div>
            </div>

            <button type="submit" name="save_mode" class="save-btn">SAVE SETTING</button>
        </form>

        <?php if(isset($msg)) { ?>
            <div class="message msg-<?php echo $alertType; ?>">
                <?php echo $msg; ?>
            </div>
        <?php } ?>
    </div>

    <script>
        const slider = document.getElementById('winSlider');
        const display = document.getElementById('dispVal');
        const circle = document.getElementById('circleBox');

        function updateUI(val) {
            display.innerText = val + '%';
            
            // Dynamic Color Logic
            let color = '#ffbd00'; // Default Warning
            
            if (val <= 20) {
                color = '#ff4d4d'; // Red (Kill)
            } else if (val >= 80) {
                color = '#00ff88'; // Green (Win)
            }

            // Apply Colors
            display.style.color = color;
            circle.style.borderColor = color;
            circle.style.boxShadow = `0 0 20px ${color}40`; // 40 is opacity
        }

        function setSlider(val) {
            slider.value = val;
            updateUI(val);
        }

        // Initialize on load
        updateUI(slider.value);
    </script>

</body>
</html>