<?php
// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}
?>

<div class="aysa-profile-container">
    <div class="aysa-profile-header">
        <h1>Your Profile</h1>
        <p>Manage your account information</p>
        <div class="aysa-profile-navigation">
            <ul class="aysa-profile-tabs">
                <li class="active"><a href="#personal-info">Personal Information</a></li>
                <li><a href="#subscription">Subscription</a></li>
                <li><a href="#api-keys">API Keys</a></li>
                <li><a href="#preferences">Preferences</a></li>
            </ul>
        </div>
    </div>
    
    <div class="aysa-profile-content">
        <div id="personal-info" class="aysa-profile-section active">
            <div class="aysa-profile-section-header">
                <h2>Personal Information</h2>
                <button class="aysa-edit-toggle aysa-btn aysa-btn-text">Edit</button>
            </div>
            
            <div class="aysa-profile-form">
                <form id="aysa-personal-info-form">
                    <div class="aysa-form-group">
                        <label for="full-name">Full Name</label>
                        <input type="text" id="full-name" name="full-name" class="aysa-input" value="John Doe" disabled>
                    </div>
                    
                    <div class="aysa-form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" class="aysa-input" value="john.doe@example.com" disabled>
                    </div>
                    
                    <div class="aysa-form-group">
                        <label for="company">Company</label>
                        <input type="text" id="company" name="company" class="aysa-input" value="Acme Corp" disabled>
                    </div>
                    
                    <div class="aysa-form-group">
                        <label for="website">Website</label>
                        <input type="url" id="website" name="website" class="aysa-input" value="https://www.example.com" disabled>
                    </div>
                    
                    <div class="aysa-form-actions">
                        <button type="submit" class="aysa-btn aysa-btn-primary" disabled>Save Changes</button>
                        <button type="button" class="aysa-btn aysa-btn-secondary aysa-cancel-edit" disabled>Cancel</button>
                    </div>
                </form>
            </div>
        </div>
        
        <div id="subscription" class="aysa-profile-section">
            <div class="aysa-profile-section-header">
                <h2>Subscription Details</h2>
            </div>
            
            <div class="aysa-subscription-info">
                <div class="aysa-subscription-card">
                    <div class="aysa-subscription-header">
                        <div class="aysa-subscription-plan">
                            <h3>Pro Plan</h3>
                            <span class="aysa-subscription-status active">Active</span>
                        </div>
                        <div class="aysa-subscription-price">
                            <span class="aysa-price">$99</span>
                            <span class="aysa-period">/ month</span>
                        </div>
                    </div>
                    
                    <div class="aysa-subscription-details">
                        <div class="aysa-subscription-detail">
                            <span class="aysa-detail-label">Billing Cycle:</span>
                            <span class="aysa-detail-value">Monthly</span>
                        </div>
                        <div class="aysa-subscription-detail">
                            <span class="aysa-detail-label">Next Billing Date:</span>
                            <span class="aysa-detail-value">June 15, 2023</span>
                        </div>
                        <div class="aysa-subscription-detail">
                            <span class="aysa-detail-label">Payment Method:</span>
                            <span class="aysa-detail-value">Visa ending in 4242</span>
                        </div>
                    </div>
                    
                    <div class="aysa-subscription-features">
                        <h4>Included Features</h4>
                        <ul class="aysa-features-list">
                            <li>Unlimited keyword tracking</li>
                            <li>Competitor analysis</li>
                            <li>Technical SEO audits</li>
                            <li>Content optimization</li>
                            <li>Weekly reports</li>
                        </ul>
                    </div>
                    
                    <div class="aysa-subscription-actions">
                        <button class="aysa-btn aysa-btn-secondary">Manage Payment Methods</button>
                        <button class="aysa-btn aysa-btn-text">Cancel Subscription</button>
                    </div>
                </div>
                
                <div class="aysa-upgrade-options">
                    <h3>Upgrade Your Plan</h3>
                    <p>Need more features? Consider upgrading to our Enterprise plan.</p>
                    <button class="aysa-btn aysa-btn-primary">View Enterprise Options</button>
                </div>
            </div>
        </div>
        
        <div id="api-keys" class="aysa-profile-section">
            <div class="aysa-profile-section-header">
                <h2>API Keys</h2>
                <button class="aysa-btn aysa-btn-secondary">Generate New Key</button>
            </div>
            
            <div class="aysa-api-keys-table aysa-table-responsive">
                <table class="aysa-table">
                    <thead>
                        <tr>
                            <th>Key Name</th>
                            <th>API Key</th>
                            <th>Created</th>
                            <th>Last Used</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Production Key</td>
                            <td>
                                <div class="aysa-api-key">
                                    <span class="aysa-api-key-value">••••••••••••••••</span>
                                    <button class="aysa-btn aysa-btn-icon" title="Copy API Key">
                                        <span class="dashicons dashicons-clipboard"></span>
                                    </button>
                                    <button class="aysa-btn aysa-btn-icon" title="Show API Key">
                                        <span class="dashicons dashicons-visibility"></span>
                                    </button>
                                </div>
                            </td>
                            <td>May 1, 2023</td>
                            <td>May 15, 2023</td>
                            <td>
                                <button class="aysa-btn aysa-btn-text aysa-btn-danger">Revoke</button>
                            </td>
                        </tr>
                        <tr>
                            <td>Development Key</td>
                            <td>
                                <div class="aysa-api-key">
                                    <span class="aysa-api-key-value">••••••••••••••••</span>
                                    <button class="aysa-btn aysa-btn-icon" title="Copy API Key">
                                        <span class="dashicons dashicons-clipboard"></span>
                                    </button>
                                    <button class="aysa-btn aysa-btn-icon" title="Show API Key">
                                        <span class="dashicons dashicons-visibility"></span>
                                    </button>
                                </div>
                            </td>
                            <td>Apr 15, 2023</td>
                            <td>May 10, 2023</td>
                            <td>
                                <button class="aysa-btn aysa-btn-text aysa-btn-danger">Revoke</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div id="preferences" class="aysa-profile-section">
            <div class="aysa-profile-section-header">
                <h2>Preferences</h2>
                <button class="aysa-edit-toggle aysa-btn aysa-btn-text">Edit</button>
            </div>
            
            <div class="aysa-profile-form">
                <form id="aysa-preferences-form">
                    <div class="aysa-form-group">
                        <label>Email Notifications</label>
                        <div class="aysa-checkbox-group">
                            <div class="aysa-checkbox">
                                <input type="checkbox" id="weekly-report" name="weekly-report" checked disabled>
                                <label for="weekly-report">Weekly Performance Reports</label>
                            </div>
                            <div class="aysa-checkbox">
                                <input type="checkbox" id="ranking-changes" name="ranking-changes" checked disabled>
                                <label for="ranking-changes">Significant Ranking Changes</label>
                            </div>
                            <div class="aysa-checkbox">
                                <input type="checkbox" id="technical-issues" name="technical-issues" checked disabled>
                                <label for="technical-issues">Technical SEO Issues</label>
                            </div>
                            <div class="aysa-checkbox">
                                <input type="checkbox" id="product-updates" name="product-updates" disabled>
                                <label for="product-updates">Product Updates and News</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="aysa-form-group">
                        <label for="date-format">Date Format</label>
                        <select id="date-format" name="date-format" class="aysa-select" disabled>
                            <option value="mm/dd/yyyy">MM/DD/YYYY</option>
                            <option value="dd/mm/yyyy" selected>DD/MM/YYYY</option>
                            <option value="yyyy-mm-dd">YYYY-MM-DD</option>
                        </select>
                    </div>
                    
                    <div class="aysa-form-group">
                        <label for="timezone">Timezone</label>
                        <select id="timezone" name="timezone" class="aysa-select" disabled>
                            <option value="utc" selected>UTC (Coordinated Universal Time)</option>
                            <option value="et">Eastern Time (US & Canada)</option>
                            <option value="ct">Central Time (US & Canada)</option>
                            <option value="mt">Mountain Time (US & Canada)</option>
                            <option value="pt">Pacific Time (US & Canada)</option>
                        </select>
                    </div>
                    
                    <div class="aysa-form-actions">
                        <button type="submit" class="aysa-btn aysa-btn-primary" disabled>Save Preferences</button>
                        <button type="button" class="aysa-btn aysa-btn-secondary aysa-cancel-edit" disabled>Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
jQuery(document).ready(function($) {
    // Tab navigation
    $('.aysa-profile-tabs li a').on('click', function(e) {
        e.preventDefault();
        
        var targetSection = $(this).attr('href');
        
        // Update active tab
        $('.aysa-profile-tabs li').removeClass('active');
        $(this).parent().addClass('active');
        
        // Show target section
        $('.aysa-profile-section').removeClass('active');
        $(targetSection).addClass('active');
    });
    
    // Toggle edit mode
    $('.aysa-edit-toggle').on('click', function() {
        var section = $(this).closest('.aysa-profile-section');
        var isEditing = $(this).hasClass('editing');
        
        if (isEditing) {
            // Switch back to view mode
            $(this).removeClass('editing').text('Edit');
            section.find('input, select, textarea').prop('disabled', true);
            section.find('.aysa-form-actions button').prop('disabled', true);
        } else {
            // Switch to edit mode
            $(this).addClass('editing').text('Cancel');
            section.find('input, select, textarea').prop('disabled', false);
            section.find('.aysa-form-actions button').prop('disabled', false);
        }
    });
    
    // Cancel edit
    $('.aysa-cancel-edit').on('click', function() {
        var section = $(this).closest('.aysa-profile-section');
        section.find('.aysa-edit-toggle').removeClass('editing').text('Edit');
        section.find('input, select, textarea').prop('disabled', true);
        section.find('.aysa-form-actions button').prop('disabled', true);
        
        // TODO: Reset form values to original
    });
    
    // API key visibility toggle
    $('.aysa-api-key .dashicons-visibility').parent().on('click', function() {
        var keyValue = $(this).siblings('.aysa-api-key-value');
        
        if (keyValue.text().includes('•')) {
            // Show the API key (in a real implementation, this would fetch the actual key)
            keyValue.text('stripe_secret_placeholder');
            $(this).find('.dashicons').removeClass('dashicons-visibility').addClass('dashicons-hidden');
        } else {
            // Hide the API key
            keyValue.text('••••••••••••••••');
            $(this).find('.dashicons').removeClass('dashicons-hidden').addClass('dashicons-visibility');
        }
    });
    
    // Submit form handlers
    $('#aysa-personal-info-form').on('submit', function(e) {
        e.preventDefault();
        // TODO: AJAX call to save personal info
        alert('Personal information updated successfully!');
        $('.aysa-profile-section#personal-info .aysa-edit-toggle').click();
    });
    
    $('#aysa-preferences-form').on('submit', function(e) {
        e.preventDefault();
        // TODO: AJAX call to save preferences
        alert('Preferences updated successfully!');
        $('.aysa-profile-section#preferences .aysa-edit-toggle').click();
    });
});
</script>

<style>
.aysa-profile-container {
    margin: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.aysa-profile-header {
    margin-bottom: 30px;
}

.aysa-profile-header h1 {
    font-size: 24px;
    margin: 0 0 5px;
    font-weight: 600;
    color: #23282d;
}

.aysa-profile-header p {
    margin: 0 0 20px;
    color: #666;
    font-size: 14px;
}

.aysa-profile-navigation {
    border-bottom: 1px solid #e2e4e7;
    margin-bottom: 20px;
}

.aysa-profile-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aysa-profile-tabs li {
    margin-bottom: -1px;
}

.aysa-profile-tabs li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.aysa-profile-tabs li.active a {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

.aysa-profile-section {
    display: none;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 25px;
}

.aysa-profile-section.active {
    display: block;
}

.aysa-profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.aysa-profile-section-header h2 {
    font-size: 18px;
    margin: 0;
    color: #23282d;
}

.aysa-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background-color: #f7f7f7;
    color: #555;
    border: 1px solid #ccc;
    transition: all 0.2s ease;
}

.aysa-btn-primary {
    background-color: #0073aa;
    color: white;
    border-color: #0073aa;
}

.aysa-btn-primary:hover {
    background-color: #006291;
    border-color: #006291;
}

.aysa-btn-secondary {
    background-color: #f0f0f1;
    color: #0073aa;
    border-color: #0073aa;
}

.aysa-btn-secondary:hover {
    background-color: #f7f7f7;
}

.aysa-btn-text {
    background: none;
    border: none;
    color: #0073aa;
    padding: 0;
}

.aysa-btn-text:hover {
    text-decoration: underline;
}

.aysa-btn-icon {
    padding: 4px;
    line-height: 1;
    border: none;
    background: none;
}

.aysa-btn-danger {
    color: #dc3232;
}

.aysa-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.aysa-form-group {
    margin-bottom: 20px;
}

.aysa-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #23282d;
}

.aysa-input,
.aysa-select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.aysa-input:focus,
.aysa-select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
    outline: none;
}

.aysa-input:disabled,
.aysa-select:disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

.aysa-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aysa-checkbox {
    display: flex;
    align-items: center;
}

.aysa-checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.aysa-checkbox label {
    margin-bottom: 0;
    font-weight: normal;
}

.aysa-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.aysa-subscription-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 25px;
}

.aysa-subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.aysa-subscription-plan h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: #23282d;
}

.aysa-subscription-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.aysa-subscription-status.active {
    background-color: #e5f5ea;
    color: #46b450;
}

.aysa-subscription-price {
    text-align: right;
}

.aysa-price {
    font-size: 24px;
    font-weight: 600;
    color: #23282d;
}

.aysa-period {
    font-size: 14px;
    color: #666;
}

.aysa-subscription-details {
    margin-bottom: 25px;
}

.aysa-subscription-detail {
    display: flex;
    margin-bottom: 10px;
}

.aysa-detail-label {
    flex: 0 0 150px;
    font-weight: 500;
    color: #666;
}

.aysa-subscription-features {
    margin-bottom: 25px;
}

.aysa-subscription-features h4 {
    font-size: 15px;
    margin: 0 0 15px;
    color: #23282d;
}

.aysa-features-list {
    margin: 0;
    padding: 0 0 0 20px;
}

.aysa-features-list li {
    margin-bottom: 8px;
    color: #666;
}

.aysa-subscription-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

.aysa-upgrade-options {
    background-color: #f0f7fc;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
}

.aysa-upgrade-options h3 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #0073aa;
}

.aysa-upgrade-options p {
    margin: 0 0 20px;
    color: #666;
}

.aysa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.aysa-table th {
    text-align: left;
    padding: 12px 15px;
    background-color: #f9f9f9;
    color: #23282d;
    font-weight: 500;
    border-bottom: 1px solid #eee;
}

.aysa-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #666;
}

.aysa-table tr:last-child td {
    border-bottom: none;
}

.aysa-api-key {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aysa-api-key-value {
    font-family: monospace;
    letter-spacing: 1px;
}

@media screen and (max-width: 782px) {
    .aysa-profile-tabs {
        flex-direction: column;
    }
    
    .aysa-profile-tabs li {
        margin-bottom: 0;
    }
    
    .aysa-profile-tabs li a {
        border-bottom: none;
        border-left: 2px solid transparent;
    }
    
    .aysa-profile-tabs li.active a {
        border-bottom-color: transparent;
        border-left-color: #0073aa;
        background-color: #f7f7f7;
    }
    
    .aysa-subscription-header {
        flex-direction: column;
    }
    
    .aysa-subscription-price {
        text-align: left;
        margin-top: 15px;
    }
    
    .aysa-subscription-detail {
        flex-direction: column;
    }
    
    .aysa-detail-label {
        flex: none;
        margin-bottom: 5px;
    }
    
    .aysa-subscription-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .aysa-subscription-actions button {
        width: 100%;
    }
}
</style> 
