<?php require('../sys/functions.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OtpAndProxy - Home</title>
    <link rel="stylesheet" href="style/theme.css">
</head>
<body>
<div class="left-container">
    <div class="header-buttons">
<?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) { ?>
        <button class="action-button" id="menu-btn" style="margin-right: auto;">User (<?php echo $user['username'] ?>)</button>
        <div class="menu" id="menu">
            <a href="dashboard.php" style="text-decoration:none;"><div class="menu-item">Dashboard(Orders etc..)</div></a>
            <a href="logout.php" style="text-decoration:none;"><div class="menu-item">Logout</div></a>
        </div>
<?php } else { ?>
        <button class="login-btn action-button"><span>Login</span></button><button class="signup-btn action-button" style="margin-right: auto;"><span>Sign up</span></button>
<?php } ?>
        <button id="activation-btn" class="action-button"><span>Activation</span></button><button id="rental-btn" class="action-button"><span>Rental</span></button>
    </div>
    <h3>Select your country</h3>
    <center><div id="country-buttons"></div></center>
    <div class="section-info">
        <p>
            <b>Country: </b><span class="country-name"></span><b> & </b><span class="section-name"></span>
<?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) { ?>
            <br><br><b>Your Balance: $</b><?php echo $user['balance_is'] ?>
<?php } ?>
        </p>
    </div>
</div>
<div class="right-container">
    <h3>Select your service</h3>
    <select class="rent-duration" id="rent-duration" style="display:none;">
        <option value="1h">1 Hour</option>
        <option value="4h">4 Hours</option>
        <option value="7h">7 Hours</option>
        <option value="1d">1 Day</option>
        <option value="3d">3 Days</option>
        <option value="7d">7 Days</option>
    </select>
    <div class="service-buttons-container" id="service-buttons"></div>
</div>
<?php if (!(isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true)) { ?>
<div id="login-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn" id="close-login-modal">&times;</span>
        <h2>Login</h2>
        <div class="alert" id="login-alert"></div>
        <form id="login-form"><input type="text" id="username" placeholder="Username" required /><input type="password" id="password" placeholder="Password" required /><button type="submit">Login</button></form>
        <div class="modal-links">
            <p><a href="#" class="forgotpassword-btn">Forgot your password?</a></p>
            <p><a href="#" class="signup-btn">Don't have an account? Sign up</a></p>
        </div>
    </div>
</div>
<div id="reset-password-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn" id="close-reset-password-modal">&times;</span>
        <h2>Reset Password</h2>
        <div class="alert" id="reset-password-alert"></div>
        <form id="reset-password-form"><input type="email" id="reset-email" placeholder="Enter your email" required /><button type="submit">Reset</button></form>
        <div class="modal-links">
            <p><a href="#" class="login-btn">Go back to login</a></p>
        </div>
    </div>
</div>
<div id="sign-up-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn" id="close-sign-up-modal">&times;</span>
        <h2>Sign up</h2>
        <div class="alert" id="sign-up-alert"></div>
        <form id="sign-up-form">
            <input type="text" id="signup-username" placeholder="Username" required /><input type="email" id="signup-email" placeholder="Email" required /><input type="password" id="signup-password" placeholder="Password" required />
            <input type="password" id="signup-confirm-password" placeholder="Confirm Password" required /><button type="submit">Create</button>
        </form>
        <div class="modal-links">
            <p><a href="#" class="login-btn">Go back to login</a></p>
        </div>
    </div>
</div>
<?php } ?>
<script src="js/index.js"></script>
</body>
</html>