<?php 
$this->load->view('layouts/header');
$this->load->helper('layout');
?>

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="<?php echo base_url('dashboard'); ?>" class="headerButton">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Profile</div>
        <div class="right"></div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        
        <?php if ($this->session->flashdata('success')): ?>
        <div class="section mt-2">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <?php echo $this->session->flashdata('success'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
        <?php endif; ?>
        
        <?php if ($this->session->flashdata('error')): ?>
        <div class="section mt-2">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <?php echo $this->session->flashdata('error'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
        <?php endif; ?>

        <!-- Profile Picture -->
        <div class="section mt-3 text-center">
            <div class="avatar-section">
                <a href="#" data-bs-toggle="modal" data-bs-target="#changeAvatarModal">
                    <img src="<?php echo get_user_avatar($user, 'w100'); ?>" alt="avatar" class="imaged w100 rounded">
                    <span class="button">
                        <ion-icon name="camera-outline"></ion-icon>
                    </span>
                </a>
            </div>
            <h2 class="mt-2 mb-0"><?php echo htmlspecialchars($user->first_name . ' ' . $user->last_name); ?></h2>
            <p class="text-muted"><?php echo htmlspecialchars($user->email); ?></p>
        </div>

        <!-- KYC Status -->
        <div class="section mt-2">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1">KYC Status</h4>
                            <p class="mb-0">Tier <?php echo $user->tier ?? 1; ?> Account</p>
                        </div>
                        <span class="badge badge-<?php echo ($user->kyc_status ?? 'pending') == 'verified' ? 'success' : 'warning'; ?>">
                            <?php echo ucfirst($user->kyc_status ?? 'pending'); ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Personal Information -->
        <div class="section mt-3">
            <div class="section-title">Personal Information</div>
            <form action="<?php echo base_url('dashboard/update_profile'); ?>" method="POST">
                <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label">First Name</label>
                                        <input type="text" class="form-control" name="first_name" value="<?php echo htmlspecialchars($user->first_name); ?>" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group basic">
                                    <div class="input-wrapper">
                                        <label class="label">Last Name</label>
                                        <input type="text" class="form-control" name="last_name" value="<?php echo htmlspecialchars($user->last_name); ?>" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Email</label>
                                <input type="email" class="form-control" value="<?php echo htmlspecialchars($user->email); ?>" disabled>
                            </div>
                        </div> -->
                        
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Phone</label>
                                <input type="tel" class="form-control" name="phone" value="<?php echo htmlspecialchars($user->phone); ?>">
                            </div>
                        </div>
                        
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Date of Birth</label>
                                <input type="date" class="form-control" name="date_of_birth" value="<?php echo $user->date_of_birth; ?>">
                            </div>
                        </div>
                        
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Gender</label>
                                <select class="form-control" name="gender">
                                    <option value="">Select</option>
                                    <option value="male" <?php echo $user->gender == 'male' ? 'selected' : ''; ?>>Male</option>
                                    <option value="female" <?php echo $user->gender == 'female' ? 'selected' : ''; ?>>Female</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label">Address</label>
                                <textarea class="form-control" name="address" rows="2"><?php echo htmlspecialchars($user->address ?? ''); ?></textarea>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary btn-block mt-2">Update Profile</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Preferences -->
        <div class="section mt-3">
            <div class="section-title">Preferences</div>
            <ul class="listview image-listview flush">
                <li>
                    <div class="item">
                        <div class="icon-box bg-dark">
                            <ion-icon name="moon-outline"></ion-icon>
                        </div>
                        <div class="in">
                            <div>Dark Mode</div>
                            <div class="form-check form-switch ms-2">
                                <input class="form-check-input dark-mode-switch" type="checkbox" id="darkmodeSwitch">
                                <label class="form-check-label" for="darkmodeSwitch"></label>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="item" data-bs-toggle="modal" data-bs-target="#notificationSettingsModal">
                        <div class="icon-box bg-info">
                            <ion-icon name="notifications-outline"></ion-icon>
                        </div>
                        <div class="in">
                            <div>Notification Settings</div>
                            <ion-icon name="chevron-forward-outline"></ion-icon>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Security -->
        <div class="section mt-3 mb-3">
            <div class="section-title">Security</div>
            <ul class="listview image-listview flush">
                <li>
                    <a href="#" class="item" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                        <div class="icon-box bg-primary">
                            <ion-icon name="lock-closed-outline"></ion-icon>
                        </div>
                        <div class="in">
                            <div>Change Password</div>
                            <ion-icon name="chevron-forward-outline"></ion-icon>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="item" data-bs-toggle="modal" data-bs-target="#changePinModal">
                        <div class="icon-box bg-warning">
                            <ion-icon name="keypad-outline"></ion-icon>
                        </div>
                        <div class="in">
                            <div>Change Transaction PIN</div>
                            <ion-icon name="chevron-forward-outline"></ion-icon>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Change Password Modal -->
    <div class="modal fade action-sheet" id="changePasswordModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Password</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <form action="<?php echo base_url('dashboard/change_password'); ?>" method="POST">
                            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                            
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Current Password</label>
                                    <input type="password" class="form-control" name="current_password" placeholder="Enter current password" required>
                                </div>
                            </div>
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">New Password</label>
                                    <input type="password" class="form-control" name="new_password" placeholder="Enter new password" required minlength="8">
                                </div>
                            </div>
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Confirm Password</label>
                                    <input type="password" class="form-control" name="confirm_password" placeholder="Confirm new password" required>
                                </div>
                            </div>
                            <div class="form-group basic mt-3">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Change Password</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Change PIN Modal -->
    <div class="modal fade action-sheet" id="changePinModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Transaction PIN</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <form action="<?php echo base_url('dashboard/change_pin'); ?>" method="POST">
                            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                            
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Current PIN</label>
                                    <input type="password" class="form-control" name="current_pin" placeholder="Enter current PIN" required maxlength="4" pattern="\d{4}">
                                </div>
                            </div>
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">New PIN (4 digits)</label>
                                    <input type="password" class="form-control" name="new_pin" placeholder="Enter new PIN" required maxlength="4" pattern="\d{4}">
                                </div>
                            </div>
                            <div class="form-group basic">
                                <div class="input-wrapper">
                                    <label class="label">Confirm PIN</label>
                                    <input type="password" class="form-control" name="confirm_pin" placeholder="Confirm new PIN" required maxlength="4">
                                </div>
                            </div>
                            <div class="form-group basic mt-3">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Change PIN</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notification Settings Modal -->
    <div class="modal fade action-sheet" id="notificationSettingsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Notification Settings</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <ul class="listview image-listview flush transparent pt-1">
                            <li>
                                <div class="item">
                                    <div class="in">
                                        <div>
                                            <strong>Push Notifications</strong>
                                            <p class="text-muted mb-0" style="font-size: 12px;">Receive alerts on your device</p>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="pushNotifications" checked>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item">
                                    <div class="in">
                                        <div>
                                            <strong>Email Notifications</strong>
                                            <p class="text-muted mb-0" style="font-size: 12px;">Receive updates via email</p>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="emailNotifications" checked>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item">
                                    <div class="in">
                                        <div>
                                            <strong>Transaction Alerts</strong>
                                            <p class="text-muted mb-0" style="font-size: 12px;">Get notified of all transactions</p>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="transactionAlerts" checked>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item">
                                    <div class="in">
                                        <div>
                                            <strong>Promotional Updates</strong>
                                            <p class="text-muted mb-0" style="font-size: 12px;">Offers and promotions</p>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="promoNotifications">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="form-group basic mt-2">
                            <button type="button" class="btn btn-primary btn-block btn-lg" data-bs-dismiss="modal">Save Settings</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Avatar Modal -->
    <div class="modal fade action-sheet" id="changeAvatarModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Profile Photo</h5>
                </div>
                <div class="modal-body">
                    <div class="action-sheet-content">
                        <form action="<?php echo base_url('dashboard/upload_avatar'); ?>" method="POST" enctype="multipart/form-data" id="avatarForm">
                            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
                            
                            <div class="form-group basic">
                                <div class="custom-file-upload" id="fileUpload1">
                                    <input type="file" name="avatar" id="fileuploadInput" accept="image/*" required>
                                    <label for="fileuploadInput">
                                        <span>
                                            <strong>
                                                <ion-icon name="cloud-upload-outline"></ion-icon>
                                                <i>Tap to Upload</i>
                                            </strong>
                                        </span>
                                    </label>
                                </div>
                                <div id="avatarPreview" class="text-center mt-2" style="display: none;">
                                    <img src="" alt="preview" class="imaged w100 rounded">
                                </div>
                            </div>
                            
                            <div class="form-group basic mt-3">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Upload Photo</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.getElementById('fileuploadInput')?.addEventListener('change', function(e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.querySelector('#avatarPreview img').src = e.target.result;
                document.getElementById('avatarPreview').style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    });
    </script>

    <!-- App Bottom Menu -->
    <?php echo get_bottom_menu('settings'); ?>

<?php $this->load->view('layouts/footer'); ?>
