<?php 
include 'common/header.php';
if(!isset($_SESSION['user_id'])) { header("Location: login.php"); exit; }

$uid = $_SESSION['user_id'];
$msg = "";
$msgType = "";

// Handle Profile Update
if(isset($_POST['update_profile'])) {
    $name = $conn->real_escape_string($_POST['name']);
    $email = $conn->real_escape_string($_POST['email']);
    $conn->query("UPDATE users SET name='$name', email='$email' WHERE id=$uid");
    $msg = "Profile updated!";
    $msgType = "success";
}

// Handle Password Change
if(isset($_POST['change_pass'])) {
    $curr = $_POST['current_pass'];
    $new = $_POST['new_pass'];
    $u = $conn->query("SELECT password FROM users WHERE id=$uid")->fetch_assoc();
    if(password_verify($curr, $u['password'])) {
        $hash = password_hash($new, PASSWORD_DEFAULT);
        $conn->query("UPDATE users SET password='$hash' WHERE id=$uid");
        $msg = "Password changed!";
        $msgType = "success";
    } else {
        $msg = "Current password incorrect!";
        $msgType = "error";
    }
}

// Fetch User Data
$u = $conn->query("SELECT * FROM users WHERE id=$uid")->fetch_assoc();
$orders = $conn->query("SELECT COUNT(*) as cnt, SUM(amount) as spent FROM orders WHERE user_id=$uid AND status='completed'")->fetch_assoc();
?>

<div class="container mx-auto px-4 py-6 mb-24 max-w-md">
    
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm mb-6 flex items-center gap-4">
        <div class="w-16 h-16 bg-sky-50 text-sky-600 rounded-full flex items-center justify-center text-2xl font-bold border border-sky-100">
            <?php echo strtoupper(substr($u['name'], 0, 1)); ?>
        </div>
        <div>
            <h2 class="font-bold text-gray-800"><?php echo $u['name']; ?></h2>
            <p class="text-gray-400 text-xs mb-1"><?php echo $u['phone']; ?></p>
            <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded uppercase font-bold tracking-tight">
                User ID: #<?php echo $u['id']; ?>
            </span>
        </div>
    </div>

    <div class="grid grid-cols-2 gap-3 mb-6">
        <div class="bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
            <p class="text-[10px] text-gray-400 uppercase font-bold mb-1">Balance</p>
            <h3 class="font-bold text-emerald-600 text-lg">৳<?php echo $u['balance']; ?></h3>
        </div>
        <div class="bg-white p-4 rounded-xl border border-gray-100 shadow-sm">
            <p class="text-[10px] text-gray-400 uppercase font-bold mb-1">Total Spent</p>
            <h3 class="font-bold text-gray-700 text-lg">৳<?php echo (float)$orders['spent']; ?></h3>
        </div>
    </div>

    <div class="flex bg-gray-100 rounded-lg p-1 mb-6">
        <button onclick="showSection('info')" id="btn-info" class="flex-1 py-2 text-xs font-bold rounded-md bg-white shadow-sm text-sky-600 transition-all">Account</button>
        <button onclick="showSection('edit')" id="btn-edit" class="flex-1 py-2 text-xs font-bold rounded-md text-gray-500 transition-all">Settings</button>
        <button onclick="showSection('security')" id="btn-security" class="flex-1 py-2 text-xs font-bold rounded-md text-gray-500 transition-all">Password</button>
    </div>

    <div id="sec-info" class="space-y-3">
        <a href="order.php" class="bg-white p-4 rounded-xl border border-gray-100 flex justify-between items-center group">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg bg-gray-50 text-gray-400 group-hover:text-sky-500 flex items-center justify-center transition-colors"><i class="fa-solid fa-box-open"></i></div>
                <span class="text-sm font-semibold text-gray-700">Order History</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i>
        </a>

        <a href="payment_history.php" class="bg-white p-4 rounded-xl border border-gray-100 flex justify-between items-center group">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg bg-gray-50 text-gray-400 group-hover:text-sky-500 flex items-center justify-center transition-colors"><i class="fa-solid fa-receipt"></i></div>
                <span class="text-sm font-semibold text-gray-700">Payment Logs</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i>
        </a>

        <a href="mycode.php" class="bg-white p-4 rounded-xl border border-gray-100 flex justify-between items-center group">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg bg-gray-50 text-gray-400 group-hover:text-sky-500 flex items-center justify-center transition-colors"><i class="fa-solid fa-key"></i></div>
                <span class="text-sm font-semibold text-gray-700">My Vouchers</span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i>
        </a>

        <a href="logout.php" class="bg-white p-4 rounded-xl border border-gray-100 flex justify-between items-center group mt-6 hover:border-red-100">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-lg bg-red-50 text-red-400 flex items-center justify-center"><i class="fa-solid fa-arrow-right-from-bracket"></i></div>
                <span class="text-sm font-semibold text-gray-700 group-hover:text-red-600">Logout</span>
            </div>
        </a>
    </div>

    <div id="sec-edit" class="hidden">
        <form method="POST" class="bg-white p-6 rounded-xl border border-gray-100 space-y-4"> 
            <input type="hidden" name="update_profile" value="1">
            <div>
                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">Full Name</label>
                <input type="text" name="name" value="<?php echo $u['name']; ?>" class="w-full border border-gray-100 p-3 rounded-lg bg-gray-50 text-sm focus:outline-none focus:border-sky-500">
            </div>
            <div>
                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">Email Address</label>
                <input type="email" name="email" value="<?php echo $u['email']; ?>" class="w-full border border-gray-100 p-3 rounded-lg bg-gray-50 text-sm focus:outline-none focus:border-sky-500">
            </div>
            <button type="submit" class="w-full bg-sky-500 text-white py-3 rounded-lg font-bold text-sm shadow-sm hover:bg-sky-600 transition-all">Update Profile</button>
        </form>
    </div>

    <div id="sec-security" class="hidden">
        <form method="POST" class="bg-white p-6 rounded-xl border border-gray-100 space-y-4">
            <input type="hidden" name="change_pass" value="1">
            <div>
                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">Current Password</label>
                <input type="password" name="current_pass" placeholder="••••••" required class="w-full border border-gray-100 p-3 rounded-lg bg-gray-50 text-sm focus:outline-none focus:border-sky-500">
            </div>
            <div>
                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">New Password</label>
                <input type="password" name="new_pass" placeholder="••••••" required class="w-full border border-gray-100 p-3 rounded-lg bg-gray-50 text-sm focus:outline-none focus:border-sky-500">
            </div>
            <button type="submit" class="w-full bg-gray-800 text-white py-3 rounded-lg font-bold text-sm hover:bg-black transition-all">Change Password</button>
        </form>
    </div>

    <div class="text-center mt-12 py-4">
        <p class="text-[10px] text-gray-300 font-bold uppercase tracking-widest">&copy; <?php echo date("Y"); ?> <?php echo getSetting($conn, 'site_name'); ?></p>
    </div>
</div>

<script>
    <?php if($msg): ?>
        document.addEventListener('DOMContentLoaded', () => {
            showNotif('<?php echo $msgType; ?>', 'Message', '<?php echo $msg; ?>');
        });
    <?php endif; ?>

    function showSection(sec) {
        ['info', 'edit', 'security'].forEach(s => {
            document.getElementById('sec-'+s).classList.add('hidden');
            document.getElementById('btn-'+s).classList.remove('bg-white', 'shadow-sm', 'text-sky-600');
            document.getElementById('btn-'+s).classList.add('text-gray-500');
        });
        document.getElementById('sec-'+sec).classList.remove('hidden');
        document.getElementById('btn-'+sec).classList.add('bg-white', 'shadow-sm', 'text-sky-600');
        document.getElementById('btn-'+sec).classList.remove('text-gray-500');
    }
</script>

<?php include 'common/bottom.php'; ?>