<?php $title = 'AdminSB Pro - My Profile'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">My Profile</h1>
</div>

<div class="row">
    <div class="col-lg-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Profile Photo</h6>
            </div>
            <div class="card-body text-center">
                <form method="POST" action="<?= $baseUrl ?>/profile/avatar" enctype="multipart/form-data">
                    <div class="mb-3">
                        <?php if ($user->avatar): ?>
                            <img class="img-profile rounded-circle" src="<?= $baseUrl . '/' . ltrim($user->avatar, '/') ?>" style="width: 150px; height: 150px; object-fit: cover;">
                        <?php else: ?>
                            <img class="img-profile rounded-circle" src="<?= $baseUrl ?>/img/undraw_profile.svg" style="width: 150px; height: 150px;">
                        <?php endif; ?>
                    </div>
                    <div class="custom-file mb-3 text-left">
                        <input type="file" class="custom-file-input" name="avatar" id="avatar" accept="image/*" required>
                        <label class="custom-file-label" for="avatar">Choose new photo...</label>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Upload Photo</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Account Details</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="<?= $baseUrl ?>/profile/update">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="name" value="<?= htmlspecialchars($user->name) ?>" required>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" class="form-control" name="email" value="<?= htmlspecialchars($user->email) ?>" required>
                    </div>
                    <hr>
                    <h6 class="text-primary">Change Password</h6>
                    <div class="form-group">
                        <label>Current Password</label>
                        <input type="password" class="form-control" name="current_password">
                    </div>
                    <div class="form-group">
                        <label>New Password</label>
                        <input type="password" class="form-control" name="new_password">
                    </div>
                    <div class="form-group">
                        <label>Confirm New Password</label>
                        <input type="password" class="form-control" name="new_password_confirm">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Profile</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('avatar')?.addEventListener('change', function(e) {
    var fileName = this.files[0].name;
    this.nextElementSibling.textContent = fileName;
});
</script>
