<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800"><?php echo __('user_profile'); ?></h1>
    </div>

    <?php if (isset($errors) && !empty($errors)): ?>
        <div class="alert alert-danger">
            <ul>
                <?php foreach ($errors as $error): ?>
                    <li><?php echo htmlspecialchars($error); ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    <?php if (isset($success_msg)): ?>
        <div class="alert alert-success">
            <?php echo htmlspecialchars($success_msg); ?>
        </div>
    <?php endif; ?>

    <div class="row">
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary"><?php echo __('profile_picture'); ?></h6>
                </div>
                <div class="card-body text-center">
                    <img src="<?php echo !empty($user['avatar']) ? $user['avatar'] : 'assets/images/default-avatar.png'; ?>" 
                         class="img-profile rounded-circle mb-3" 
                         style="width: 150px; height: 150px; object-fit: cover;" 
                         alt="Profile Picture">
                    <p class="text-muted mb-1"><?php echo htmlspecialchars($user['name']); ?></p>
                    <p class="text-muted small"><?php echo htmlspecialchars($user['email']); ?></p>
                    <p class="badge badge-primary"><?php echo htmlspecialchars($user['role_slug']); ?></p>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary"><?php echo __('edit_profile'); ?></h6>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="name"><?php echo __('name'); ?></label>
                            <input type="text" class="form-control" id="name" name="name" value="<?php echo htmlspecialchars($user['name']); ?>" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email"><?php echo __('email'); ?></label>
                            <input type="email" class="form-control" id="email" name="email" value="<?php echo htmlspecialchars($user['email']); ?>" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="avatar"><?php echo __('change_avatar'); ?></label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="avatar" name="avatar" accept="image/*">
                                <label class="custom-file-label" for="avatar"><?php echo __('choose_file'); ?></label>
                            </div>
                            <small class="form-text text-muted"><?php echo __('allowed_file_types'); ?>: jpg, jpeg, png, gif</small>
                        </div>

                        <hr>
                        <h6 class="mb-3 font-weight-bold text-gray-800"><?php echo __('change_password'); ?> <small class="text-muted font-weight-normal">(<?php echo __('leave_blank_to_keep_current'); ?>)</small></h6>
                        
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="password"><?php echo __('new_password'); ?></label>
                                <input type="password" class="form-control" id="password" name="password" minlength="6">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="password_confirm"><?php echo __('confirm_password'); ?></label>
                                <input type="password" class="form-control" id="password_confirm" name="password_confirm" minlength="6">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-block"><?php echo __('save_changes'); ?></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Show file name in custom file input
$(".custom-file-input").on("change", function() {
   var fileName = $(this).val().split("\\").pop();
   $(this).next(".custom-file-label").addClass("selected").html(fileName);
});
</script>
