<?php require_once __DIR__ . '/../src/bootstrap.php'; ?>
<?php require_once __DIR__ . '/layout/header.php'; ?>

<link rel="stylesheet" href="<?= \Tshen\asset('profile.css') ?>">

<div class="profile-container">
    <h1 class="profile-title" style="color: #ffffffff;">Your Profile</h1>
    
    <?php if (!empty($_SESSION['flash']['success'])): ?>
        <div class="notice success"><?= htmlspecialchars($_SESSION['flash']['success']) ?></div>
    <?php endif; ?>
    
    <?php if (!empty($_SESSION['flash']['error'])): ?>
        <div class="notice error"><?= htmlspecialchars($_SESSION['flash']['error']) ?></div>
    <?php endif; ?>
    
    <div class="profile-content">
        <div class="profile-sidebar">
            <div class="profile-picture-container">
                 <img src="<?= !empty($profile['profile_picture']) ? \Tshen\asset(ltrim($profile['profile_picture'], '/')) : \Tshen\asset('icon.png') ?>" 
                     alt="Profile Picture" class="profile-picture">
                 <form action="<?= \Tshen\url('/profile/upload-picture') ?>" method="post" enctype="multipart/form-data" class="upload-form">
                    <?= \Tshen\csrf_field() ?>
                    <label for="profile_picture" class="upload-btn">Change Picture</label>
                    <input type="file" id="profile_picture" name="profile_picture" accept="image/*" style="display:none" onchange="this.form.submit()">
                </form>
            </div>
            <div class="profile-stats">
                <div class="stat-item">
                    <span class="stat-label">Credits</span>
                    <span class="stat-value"><?= htmlspecialchars($user['credits'] ?? '0') ?></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Member Since</span>
                    <span class="stat-value"><?= !empty($user['created_at']) ? date('M Y', strtotime($user['created_at'])) : 'N/A' ?></span>
                </div>
            </div>
        </div>
        
        <div class="profile-details">
            <h3>Personal Information</h3>
            <form action="<?= \Tshen\url('/profile/update') ?>" method="post" class="profile-form">
                <?= \Tshen\csrf_field() ?>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="first_name">First Name</label>
                        <input type="text" id="first_name" name="first_name" value="<?= htmlspecialchars($profile['first_name'] ?? '') ?>" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="last_name">Last Name</label>
                        <input type="text" id="last_name" name="last_name" value="<?= htmlspecialchars($profile['last_name'] ?? '') ?>" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" value="<?= htmlspecialchars($user['email'] ?? '') ?>" disabled>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" name="phone" value="<?= htmlspecialchars($profile['phone'] ?? '') ?>">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="address">Address</label>
                    <textarea id="address" name="address" rows="3"><?= htmlspecialchars($profile['address'] ?? '') ?></textarea>
                </div>
                
                <div class="form-group">
                    <label>Gender</label>
                    <div class="radio-group">
                        <label class="radio">
                            <input type="radio" name="gender" value="male" <?= ($profile['gender'] ?? '') === 'male' ? 'checked' : '' ?>> Male
                        </label>
                        <label class="radio">
                            <input type="radio" name="gender" value="female" <?= ($profile['gender'] ?? '') === 'female' ? 'checked' : '' ?>> Female
                        </label>
                        
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="bio">Bio</label>
                    <textarea id="bio" name="bio" rows="4"><?= htmlspecialchars($profile['bio'] ?? '') ?></textarea>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="cta-btn">Save Changes</button>
                </div>
            </form>
            
            <form action="<?= \Tshen\url('/profile/update-password') ?>" method="post">
                <?= \Tshen\csrf_field() ?>
                <h3>Change Password</h3>
                <div class="form-group">
                    <label for="current_password">Current Password</label>
                    <input type="password" id="current_password" name="current_password">
                </div>
                
                <div class="form-group">
                    <label for="new_password">New Password</label>
                    <input type="password" id="new_password" name="new_password">
                </div>
                
                <div class="form-group">
                    <label for="confirm_password">Confirm New Password</label>
                    <input type="password" id="confirm_password" name="confirm_password">
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="cta-btn">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add validation for the profile form
    const profileForm = document.querySelector('.profile-form');
    profileForm.addEventListener('submit', function(e) {
        const firstName = document.getElementById('first_name').value.trim();
        const lastName = document.getElementById('last_name').value.trim();
        
        if (!firstName || !lastName) {
            e.preventDefault();
            alert('First name and last name are required');
        }
    });
    
    // Add validation for the password form
    const passwordForm = document.querySelector('form[action="<?= \Tshen\url('/profile/update-password') ?>"]');
    passwordForm.addEventListener('submit', function(e) {
        const currentPassword = document.getElementById('current_password').value;
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        
        if (!currentPassword || !newPassword || !confirmPassword) {
            e.preventDefault();
            alert('All password fields are required');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert('New passwords do not match');
        }
    });
});
</script>

