<?php
/**
 * Display for Communication Settings tab
 */
?>

<style>
.smtp-settings {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
.smtp-test-result {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
}
.smtp-test-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.smtp-test-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.smtp-toggle {
    margin-top: 15px;
}
</style>

<form method="post" action="options.php">
    <?php settings_fields('subscription_communication_settings'); ?>
    
    <h2>📧 Communication Settings</h2>
    
    <table class="form-table">
        <tr>
            <th scope="row">Enable Email Notifications</th>
            <td>
                <input type="checkbox" name="enable_email_notifications" id="enable_email_notifications" value="1" <?php checked(get_option('enable_email_notifications'), 1); ?>>
                <label for="enable_email_notifications">Send email notifications to subscribers</label>
                <p class="description">Enable this to send beautiful email notifications when new content is published.</p>
            </td>
        </tr>
        
        <tr>
            <th scope="row">From Email Address</th>
            <td>
                <input type="email" name="subscription_from_email" value="<?php echo esc_attr(get_option('subscription_from_email', get_option('admin_email'))); ?>" class="regular-text">
                <p class="description">Email address that will appear as the sender of notification emails.</p>
            </td>
        </tr>
        
        <tr>
            <th scope="row">From Name</th>
            <td>
                <input type="text" name="subscription_from_name" value="<?php echo esc_attr(get_option('subscription_from_name', get_bloginfo('name'))); ?>" class="regular-text">
                <p class="description">Name that will appear as the sender of notification emails.</p>
            </td>
        </tr>
    </table>

    <div class="smtp-settings">
        <h3>📮 SMTP Configuration</h3>
        <p>Configure SMTP settings for reliable email delivery. This is recommended for production sites.</p>
        
        <table class="form-table">
            <tr>
                <th scope="row">Enable SMTP</th>
                <td>
                    <input type="checkbox" name="subscription_enable_smtp" id="subscription_enable_smtp" value="1" <?php checked(get_option('subscription_enable_smtp'), 1); ?>>
                    <label for="subscription_enable_smtp">Use SMTP for sending emails</label>
                    <p class="description">Enable this to use SMTP instead of PHP mail() function for better deliverability.</p>
                </td>
            </tr>
        </table>

        <div id="smtp-settings-fields" style="<?php echo get_option('subscription_enable_smtp') ? '' : 'display: none;'; ?>">
            <table class="form-table">
                <tr>
                    <th scope="row">SMTP Host</th>
                    <td>
                        <input type="text" name="subscription_smtp_host" value="<?php echo esc_attr(get_option('subscription_smtp_host')); ?>" class="regular-text" placeholder="smtp.gmail.com">
                        <p class="description">Your SMTP server hostname (e.g., smtp.gmail.com, smtp.mailgun.org)</p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row">SMTP Port</th>
                    <td>
                        <select name="subscription_smtp_port" id="smtp_port">
                            <option value="25" <?php selected(get_option('subscription_smtp_port'), '25'); ?>>25 (Default)</option>
                            <option value="465" <?php selected(get_option('subscription_smtp_port'), '465'); ?>>465 (SSL)</option>
                            <option value="587" <?php selected(get_option('subscription_smtp_port'), '587'); ?>>587 (TLS) ⭐ SendGrid</option>
                            <option value="2525" <?php selected(get_option('subscription_smtp_port'), '2525'); ?>>2525 (Alternative)</option>
                        </select>
                        <p class="description">SMTP port number. <strong>For SendGrid, use 587 with TLS.</strong></p>
                        <div style="font-size: 12px; margin-top: 5px;">
                            <strong>Port Quick Links:</strong>
                            <a href="#" onclick="document.getElementById('smtp_port').value='25'; return false;">25</a> |
                            <a href="#" onclick="document.getElementById('smtp_port').value='465'; return false;">465</a> |
                            <a href="#" onclick="document.getElementById('smtp_port').value='587'; return false;" style="color: #1a8917; font-weight: bold;">587</a> |
                            <a href="#" onclick="document.getElementById('smtp_port').value='2525'; return false;">2525</a>
                        </div>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row">Encryption</th>
                    <td>
                        <select name="subscription_smtp_encryption" id="smtp_encryption">
                            <option value="" <?php selected(get_option('subscription_smtp_encryption'), ''); ?>>None</option>
                            <option value="ssl" <?php selected(get_option('subscription_smtp_encryption'), 'ssl'); ?>>SSL</option>
                            <option value="tls" <?php selected(get_option('subscription_smtp_encryption'), 'tls'); ?>>TLS (Recommended)</option>
                        </select>
                        <p class="description">Encryption method. <strong>For SendGrid, use TLS with port 587.</strong></p>
                        <div style="font-size: 12px; margin-top: 5px;">
                            <strong>Quick Settings:</strong>
                            <a href="#" onclick="setSmtpConfig('tls', '587')" style="color: #1a8917;">TLS + Port 587</a> | 
                            <a href="#" onclick="setSmtpConfig('ssl', '465')" style="color: #666;">SSL + Port 465</a> | 
                            <a href="#" onclick="setSmtpConfig('', '25')" style="color: #666;">None + Port 25</a>
                        </div>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row">Authentication</th>
                    <td>
                        <input type="checkbox" name="subscription_smtp_auth" id="subscription_smtp_auth" value="1" <?php checked(get_option('subscription_smtp_auth', 1), 1); ?>>
                        <label for="subscription_smtp_auth">Use SMTP authentication</label>
                        <p class="description">Most SMTP servers require authentication.</p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row">Username</th>
                    <td>
                        <input type="text" name="subscription_smtp_username" value="<?php echo esc_attr(get_option('subscription_smtp_username')); ?>" class="regular-text" placeholder="your-email@domain.com">
                        <p class="description">SMTP username (usually your email address)</p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row">Password</th>
                    <td>
                        <input type="password" name="subscription_smtp_password" value="<?php echo esc_attr(get_option('subscription_smtp_password')); ?>" class="regular-text">
                        <p class="description">SMTP password or app-specific password</p>
                    </td>
                </tr>
            </table>

            <div class="smtp-toggle">
                <button type="button" id="test-smtp-connection" class="button button-secondary">🔍 Test SMTP Connection</button>
                <div id="smtp-test-result"></div>
            </div>
        </div>
    </div>

    <h3>📋 Popular SMTP Settings</h3>
    <div style="background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin: 10px 0;">
        <h4>Gmail</h4>
        <ul>
            <li><strong>Host:</strong> smtp.gmail.com</li>
            <li><strong>Port:</strong> 587 (TLS) or 465 (SSL)</li>
            <li><strong>Username:</strong> your-email@gmail.com</li>
            <li><strong>Password:</strong> App-specific password (not your regular password)</li>
        </ul>
        
        <h4>Mailgun</h4>
        <ul>
            <li><strong>Host:</strong> smtp.mailgun.org</li>
            <li><strong>Port:</strong> 587</li>
            <li><strong>Username:</strong> postmaster@your-domain.mailgun.org</li>
            <li><strong>Password:</strong> Your Mailgun SMTP password</li>
        </ul>
        
        <h4>SendGrid (Recommended for Production)</h4>
        <ul>
            <li><strong>Host:</strong> smtp.sendgrid.net</li>
            <li><strong>Port:</strong> 587 (TLS) - <em>Not 465!</em></li>
            <li><strong>Encryption:</strong> TLS</li>
            <li><strong>Username:</strong> apikey (exactly this word)</li>
            <li><strong>Password:</strong> Your SendGrid API key (starts with SG.)</li>
        </ul>
        <p><strong>⚠️ Important:</strong> SendGrid requires port 587 with TLS, not SSL. Username must be exactly "apikey".</p>
    </div>
    
    <?php submit_button('💾 Save Settings'); ?>
</form>

<script>
jQuery(document).ready(function($) {
    // Toggle SMTP settings visibility
    $('#subscription_enable_smtp').change(function() {
        if ($(this).is(':checked')) {
            $('#smtp-settings-fields').slideDown();
        } else {
            $('#smtp-settings-fields').slideUp();
        }
    });

    // Function to set SMTP configuration quickly
    window.setSmtpConfig = function(encryption, port) {
        $('#smtp_encryption').val(encryption);
        $('select[name="subscription_smtp_port"]').val(port);
        
        // Show success message
        var message = 'Configuration updated: ';
        if (encryption === 'tls' && port === '587') {
            message += 'TLS + Port 587 (Recommended for SendGrid)';
        } else if (encryption === 'ssl' && port === '465') {
            message += 'SSL + Port 465';
        } else {
            message += 'None + Port ' + port;
        }
        
        // Show temporary success message
        var successDiv = $('<div style="background: #d4edda; color: #155724; padding: 8px; border-radius: 4px; margin: 5px 0; font-size: 12px;">' + message + '</div>');
        $(event.target).parent().append(successDiv);
        setTimeout(function() {
            successDiv.fadeOut();
        }, 3000);
        
        return false;
    };

    // Test SMTP connection
    $('#test-smtp-connection').click(function() {
        var button = $(this);
        var resultDiv = $('#smtp-test-result');
        
        button.text('🔄 Testing...').prop('disabled', true);
        resultDiv.html('');
        
        $.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
                action: 'test_smtp_connection',
                nonce: '<?php echo wp_create_nonce('test_smtp_nonce'); ?>',
                smtp_host: $('input[name="subscription_smtp_host"]').val(),
                smtp_port: $('select[name="subscription_smtp_port"]').val(),
                smtp_encryption: $('select[name="subscription_smtp_encryption"]').val(),
                smtp_auth: $('input[name="subscription_smtp_auth"]').is(':checked') ? 1 : 0,
                smtp_username: $('input[name="subscription_smtp_username"]').val(),
                smtp_password: $('input[name="subscription_smtp_password"]').val(),
                from_email: $('input[name="subscription_from_email"]').val(),
                from_name: $('input[name="subscription_from_name"]').val()
            },
            success: function(response) {
                if (response.success) {
                    resultDiv.html('<div class="smtp-test-success">✅ ' + response.data.message + '</div>');
                } else {
                    resultDiv.html('<div class="smtp-test-error">❌ ' + response.data.message + '</div>');
                }
            },
            error: function() {
                resultDiv.html('<div class="smtp-test-error">❌ Error testing SMTP connection</div>');
            },
            complete: function() {
                button.text('🔍 Test SMTP Connection').prop('disabled', false);
            }
        });
    });
});
</script> 
 