@extends('layouts.app')
@section('title') Email Configuration @endsection
@section('content')
@php
$user_role = Auth::user()->user_role;
@endphp
<style>
.content-header {
    position: relative;
    padding: 14px 15px 0 15px !important;
}
.email-provider-preset {
    margin-bottom: 20px;
}
.preset-info {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    display: none;
}
.btn-purple {
    background-color:#400090;
    border-color:#400090;
    color:#fff;
}
</style>

<section class="content-header">
    <h1>
        Email Configuration
        <small>Set up your email account</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Email Configuration</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            @include('layouts.flesh-message')
            
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-envelope"></i> Configure Your Email Account</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-info btn-sm" onclick="event.preventDefault(); event.stopPropagation(); $('#faqModal').modal('show'); return false;">
                            <i class="fa fa-question-circle"></i> Help & FAQ
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <form action="{{ route('mailbox.config.save') }}" method="POST" id="emailConfigForm">
                    @csrf
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Email Provider <span class="text-red">*</span></label>
                                    <select class="form-control" id="email_provider" name="email_provider" required>
                                        <option value="">-- Select Email Provider --</option>
                                        <option value="spiritre">Spiritre (manual IMAP/SMTP)</option>
                                        <!-- <option value="gmail">Gmail (OAuth2 or App Password)</option>
                                        <option value="outlook">Outlook / Office 365 (OAuth2 or App Password)</option>
                                        <option value="yahoo">Yahoo Mail (OAuth2 or App Password)</option> -->
                                        <option value="custom">Custom / Other (manual IMAP/SMTP)</option>
                                    </select>
                                    <small class="help-block">
                                        For Gmail, Outlook, and Yahoo we recommend secure OAuth2 sign‑in. You can also use App Passwords for all three providers.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="email-provider-preset" id="preset-info">
                            <div class="preset-info" id="spiritre-info">
                                <strong>Spiritre Settings:</strong><br>
                                Incoming Server: spiritre.com<br>
                                IMAP Port: 993 (SSL)<br>
                                POP3 Port: 995 (SSL)<br>
                                Outgoing Server: spiritre.com<br>
                                SMTP Port: 465 (SSL)<br>
                                <small class="text-yellow">Note: IMAP, POP3, and SMTP require authentication.</small>
                            </div>
                            <div class="preset-info" id="gmail-info">
                                <strong>Gmail Authentication Options:</strong><br>
                                <div style="margin-top: 10px;">
                                    <strong>Option 1 - OAuth2 (Recommended):</strong><br>
                                    Click the button below to securely connect your Gmail account. No app password needed.<br>
                                    <a href="javascript:void(0);" class="btn btn-danger btn-sm" id="gmail-oauth-btn" style="margin-top: 5px;">
                                        <i class="fa fa-google"></i> Connect Gmail with OAuth
                                    </a>
                                </div>
                                <div style="margin-top: 15px;">
                                    <strong>Option 2 - App Password:</strong><br>
                                    If you prefer to use an App Password, enter your Gmail email address and App Password below. 
                                    To create an App Password: Google Account → Security → 2-Step Verification → App Passwords
                                </div>
                            </div>
                            <div class="preset-info" id="outlook-info">
                                <strong>Outlook/Office 365 Authentication Options:</strong><br>
                                <div style="margin-top: 10px;">
                                    <strong>Option 1 - OAuth2 (Recommended):</strong><br>
                                    Click the button below to securely connect your Outlook/Office 365 mailbox. No app password needed.<br>
                                    <a href="javascript:void(0);" class="btn btn-primary btn-sm" id="outlook-oauth-btn" style="margin-top: 5px;">
                                        <i class="fa fa-windows"></i> Connect Outlook / Office 365 with OAuth
                                    </a>
                                </div>
                                <div style="margin-top: 15px;">
                                    <strong>Option 2 - App Password:</strong><br>
                                    If you prefer to use an App Password, enter your Outlook/Office 365 email address and App Password below. 
                                    To create an App Password: Microsoft Account → Security → Advanced security options → App passwords
                                </div>
                            </div>
                            <div class="preset-info" id="yahoo-info">
                                <strong>Yahoo Mail Authentication Options:</strong><br>
                                <div style="margin-top: 10px;">
                                    <strong>Option 1 - OAuth2 (Recommended):</strong><br>
                                    Click the button below to securely connect your Yahoo mailbox. No app password needed.<br>
                                    <a href="javascript:void(0);" class="btn btn-purple btn-sm" id="yahoo-oauth-btn" style="background-color:#400090;border-color:#400090;margin-top: 5px;">
                                        <i class="fa fa-envelope"></i> Connect Yahoo with OAuth
                                    </a>
                                </div>
                                <div style="margin-top: 15px;">
                                    <strong>Option 2 - App Password:</strong><br>
                                    If you prefer to use an App Password, enter your Yahoo email address and App Password below. 
                                    To create an App Password: Yahoo Account → Account Security → Generate app password
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email Address <span class="text-red">*</span></label>
                                    <input type="email" class="form-control" name="email" id="email" 
                                           value="{{ old('email', Auth::user()->email) }}" placeholder="your.email@example.com" required>
                                    <small class="help-block">Enter the email address you want to configure</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email Password <span class="text-red">*</span></label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" name="password" id="password" 
                                               placeholder="Enter your email password" required>
                                        <span class="input-group-addon" style="cursor: pointer;" onclick="togglePassword()">
                                            <i class="fa fa-eye" id="toggleIcon"></i>
                                        </span>
                                    </div>
                                    <small class="help-block" id="password-help">Use the email account's password</small>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Hidden field for username (auto-filled from email) -->
                        <input type="hidden" name="username" id="username" value="{{ old('username') }}">

                        <hr>
                        <h4><i class="fa fa-server"></i> IMAP Settings (Incoming Mail)</h4>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>IMAP Server <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="imap_host" id="imap_host" 
                                           value="{{ old('imap_host') }}" placeholder="imap.gmail.com" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>IMAP Port <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" name="imap_port" id="imap_port" 
                                           value="{{ old('imap_port', 993) }}" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Encryption <span class="text-red">*</span></label>
                                    <select class="form-control" name="imap_encryption" id="imap_encryption" required>
                                        <option value="ssl" {{ old('imap_encryption', 'ssl') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                        <option value="tls" {{ old('imap_encryption') == 'tls' ? 'selected' : '' }}>TLS</option>
                                        <option value="none" {{ old('imap_encryption') == 'none' ? 'selected' : '' }}>None</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4><i class="fa fa-inbox"></i> POP3 Settings (Incoming Mail - Alternative)</h4>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>POP3 Server</label>
                                    <input type="text" class="form-control" name="pop3_host" id="pop3_host" 
                                           value="{{ old('pop3_host') }}" placeholder="pop3.gmail.com">
                                    <small class="help-block">Optional: Leave empty if using IMAP only</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>POP3 Port</label>
                                    <input type="number" class="form-control" name="pop3_port" id="pop3_port" 
                                           value="{{ old('pop3_port', 995) }}" placeholder="995">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Encryption</label>
                                    <select class="form-control" name="pop3_encryption" id="pop3_encryption">
                                        <option value="ssl" {{ old('pop3_encryption', 'ssl') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                        <option value="tls" {{ old('pop3_encryption') == 'tls' ? 'selected' : '' }}>TLS</option>
                                        <option value="none" {{ old('pop3_encryption') == 'none' ? 'selected' : '' }}>None</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4><i class="fa fa-paper-plane"></i> SMTP Settings (Outgoing Mail)</h4>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>SMTP Server <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" name="smtp_host" id="smtp_host" 
                                           value="{{ old('smtp_host') }}" placeholder="smtp.gmail.com" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>SMTP Port <span class="text-red">*</span></label>
                                    <input type="number" class="form-control" name="smtp_port" id="smtp_port" 
                                           value="{{ old('smtp_port', 587) }}" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Encryption <span class="text-red">*</span></label>
                                    <select class="form-control" name="smtp_encryption" id="smtp_encryption" required>
                                        <option value="tls" {{ old('smtp_encryption', 'tls') == 'tls' ? 'selected' : '' }}>TLS</option>
                                        <option value="ssl" {{ old('smtp_encryption') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                        <option value="none" {{ old('smtp_encryption') == 'none' ? 'selected' : '' }}>None</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul style="margin-bottom: 0;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="button" class="btn btn-info" onclick="event.preventDefault(); event.stopPropagation(); $('#faqModal').modal('show'); return false;">
                            <i class="fa fa-question-circle"></i> Help & Troubleshooting
                        </button>
                        <button type="button" class="btn btn-primary pull-right" onclick="testConnection()">
                            <i class="fa fa-plug"></i> Test Connection
                        </button>
                    </div>
                </form>
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<!-- FAQ and Troubleshooting Modal -->
<div class="modal fade" id="faqModal" tabindex="-1" role="dialog" aria-labelledby="faqModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="faqModalLabel">
                    <i class="fa fa-question-circle"></i> Email Configuration Help & Troubleshooting
                </h4>
            </div>
            <div class="modal-body">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#troubleshooting" data-toggle="tab">Troubleshooting</a></li>
                        <li><a href="#common-settings" data-toggle="tab">Common Settings</a></li>
                        <li><a href="#faq" data-toggle="tab">FAQ</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- Troubleshooting Tab -->
                        <div class="tab-pane active" id="troubleshooting">
                            <h4><i class="fa fa-wrench"></i> Common Connection Issues & Solutions</h4>
                            
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-exclamation-triangle"></i> "Too many login failures" Error</h5>
                                </div>
                                <div class="panel-body">
                                    <p><strong>What it means:</strong> Your email account has been temporarily locked due to multiple failed login attempts.</p>
                                    <p><strong>Solutions:</strong></p>
                                    <ol>
                                        <li><strong>Wait 15-30 minutes</strong> before trying again</li>
                                        <li><strong>Verify your password</strong> is correct (check for typos, caps lock)</li>
                                        <li>For Gmail: Use an <strong>App Password</strong> instead of your regular password</li>
                                        <li>For Yahoo: Generate an <strong>App Password</strong> from Account Security settings</li>
                                        <li>Check if your email provider requires <strong>2-factor authentication</strong> to be enabled</li>
                                        <li>Contact your email administrator if the issue persists</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-exclamation-circle"></i> "Authentication failed" or "Invalid credentials"</h5>
                                </div>
                                <div class="panel-body">
                                    <p><strong>Solutions:</strong></p>
                                    <ol>
                                        <li>Double-check your <strong>username</strong> and <strong>password</strong></li>
                                        <li>For Gmail: Enable "Less secure app access" or use an App Password</li>
                                        <li>For Office 365: Ensure your account allows IMAP access</li>
                                        <li>Make sure you're using the <strong>full email address</strong> as username</li>
                                        <li>Check if your password has special characters that need escaping</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-server"></i> "Cannot connect" or "Connection refused"</h5>
                                </div>
                                <div class="panel-body">
                                    <p><strong>Solutions:</strong></p>
                                    <ol>
                                        <li>Verify the <strong>IMAP server hostname</strong> is correct</li>
                                        <li>Check the <strong>port number</strong> matches your encryption type:
                                            <ul>
                                                <li>SSL: Usually port 993 for IMAP, 465 for SMTP</li>
                                                <li>TLS: Usually port 587 for SMTP</li>
                                            </ul>
                                        </li>
                                        <li>Ensure <strong>encryption type</strong> matches (SSL/TLS/None)</li>
                                        <li>Check if your <strong>firewall</strong> is blocking the connection</li>
                                        <li>Verify your <strong>internet connection</strong> is working</li>
                                        <li>Some networks block email ports - try from a different network</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-lock"></i> SSL/TLS Certificate Errors</h5>
                                </div>
                                <div class="panel-body">
                                    <p><strong>Solutions:</strong></p>
                                    <ol>
                                        <li>The system automatically bypasses certificate validation for testing</li>
                                        <li>If errors persist, verify your email provider's SSL certificate is valid</li>
                                        <li>Contact your email provider's support for certificate issues</li>
                                    </ol>
                                </div>
                            </div>

                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-check-circle"></i> General Troubleshooting Steps</h5>
                                </div>
                                <div class="panel-body">
                                    <ol>
                                        <li><strong>Select your email provider</strong> from the dropdown to auto-fill settings</li>
                                        <li><strong>Verify all required fields</strong> are filled correctly</li>
                                        <li><strong>Check your email provider's documentation</strong> for specific requirements</li>
                                        <li><strong>Test with a different email client</strong> (like Outlook or Thunderbird) to verify your settings</li>
                                        <li><strong>Contact your IT administrator</strong> if using a corporate email account</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <!-- Common Settings Tab -->
                        <div class="tab-pane" id="common-settings">
                            <h4><i class="fa fa-cog"></i> Common Email Provider Settings</h4>
                            
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-envelope"></i> Gmail Settings</h5>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Setting</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>IMAP Server</strong></td>
                                                <td>imap.gmail.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Port</strong></td>
                                                <td>993</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Encryption</strong></td>
                                                <td>SSL</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Server</strong></td>
                                                <td>smtp.gmail.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Port</strong></td>
                                                <td>587</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Encryption</strong></td>
                                                <td>TLS</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="alert alert-warning">
                                        <strong>Important:</strong> Gmail requires either "Less secure app access" enabled OR an App Password. 
                                        To create an App Password: Google Account → Security → 2-Step Verification → App Passwords
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-windows"></i> Outlook / Office 365 Settings</h5>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Setting</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>IMAP Server</strong></td>
                                                <td>outlook.office365.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Port</strong></td>
                                                <td>993</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Encryption</strong></td>
                                                <td>SSL</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Server</strong></td>
                                                <td>smtp.office365.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Port</strong></td>
                                                <td>587</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Encryption</strong></td>
                                                <td>TLS</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-yahoo"></i> Yahoo Mail Settings</h5>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Setting</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>IMAP Server</strong></td>
                                                <td>imap.mail.yahoo.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Port</strong></td>
                                                <td>993</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Encryption</strong></td>
                                                <td>SSL</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Server</strong></td>
                                                <td>smtp.mail.yahoo.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Port</strong></td>
                                                <td>587</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Encryption</strong></td>
                                                <td>TLS</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="alert alert-warning">
                                        <strong>Important:</strong> Yahoo requires an App Password. Generate one from: 
                                        Account Security → Generate app password
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h5 class="panel-title"><i class="fa fa-building"></i> Spiritre Settings</h5>
                                </div>
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Setting</th>
                                                <th>Value</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>IMAP Server</strong></td>
                                                <td>spiritre.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Port</strong></td>
                                                <td>993</td>
                                            </tr>
                                            <tr>
                                                <td><strong>IMAP Encryption</strong></td>
                                                <td>SSL</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Server</strong></td>
                                                <td>spiritre.com</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Port</strong></td>
                                                <td>465</td>
                                            </tr>
                                            <tr>
                                                <td><strong>SMTP Encryption</strong></td>
                                                <td>SSL</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Tab -->
                        <div class="tab-pane" id="faq">
                            <h4><i class="fa fa-question-circle"></i> Frequently Asked Questions</h4>
                            
                            <div class="panel-group" id="faqAccordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq1">
                                                What is IMAP and why do I need it?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq1" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <p>IMAP (Internet Message Access Protocol) allows you to access your email from multiple devices while keeping messages synchronized. It's required for this system to read and manage your emails.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq2">
                                                What's the difference between IMAP and POP3?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><strong>IMAP:</strong> Messages stay on the server, accessible from multiple devices. Recommended for most users.</p>
                                            <p><strong>POP3:</strong> Messages are downloaded and typically removed from the server. Use if you only access email from one device.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq3">
                                                Why do I need an App Password for Gmail/Yahoo?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq3" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Gmail and Yahoo require App Passwords for security when using third-party applications. This is separate from your regular password and provides better security. You can generate one from your account security settings.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq4">
                                                What if my email provider is not listed?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq4" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Select "Custom / Other" and enter your email provider's IMAP and SMTP settings. You can usually find these settings in your email provider's help documentation or by contacting their support.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq5">
                                                Is my password stored securely?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq5" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Yes, your password is encrypted before being stored in the database. Only you can access your email configuration, and passwords are never displayed in plain text.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq6">
                                                Can I use the same settings for multiple email accounts?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq6" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>Each user can configure one email account. If you need to use multiple accounts, you'll need to configure them separately or contact your administrator.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#faqAccordion" href="#faq7">
                                                What should I do if the test connection fails?
                                            </a>
                                        </h5>
                                    </div>
                                    <div id="faq7" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p>First, check the error message for specific guidance. Then:</p>
                                            <ol>
                                                <li>Verify all settings match your email provider's requirements</li>
                                                <li>Double-check your username and password</li>
                                                <li>For Gmail/Yahoo, ensure you're using an App Password</li>
                                                <li>Wait 15-30 minutes if you see "too many login failures"</li>
                                                <li>Check your internet connection and firewall settings</li>
                                                <li>Contact your email provider's support if issues persist</li>
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('dist/js/adminlte.min.js') }}"></script>

<script>
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleIcon = document.getElementById('toggleIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Email provider presets
const emailPresets = {
    spiritre: {
        imap_host: 'spiritre.com',
        imap_port: 993,
        imap_encryption: 'ssl',
        pop3_host: 'spiritre.com',
        pop3_port: 995,
        pop3_encryption: 'ssl',
        smtp_host: 'spiritre.com',
        smtp_port: 465,
        smtp_encryption: 'ssl'
    },
    gmail: {
        imap_host: 'imap.gmail.com',
        imap_port: 993,
        imap_encryption: 'ssl',
        pop3_host: 'pop.gmail.com',
        pop3_port: 995,
        pop3_encryption: 'ssl',
        smtp_host: 'smtp.gmail.com',
        smtp_port: 587,
        smtp_encryption: 'tls'
    },
    outlook: {
        imap_host: 'outlook.office365.com',
        imap_port: 993,
        imap_encryption: 'ssl',
        pop3_host: 'outlook.office365.com',
        pop3_port: 995,
        pop3_encryption: 'ssl',
        smtp_host: 'smtp.office365.com',
        smtp_port: 587,
        smtp_encryption: 'tls'
    },
    yahoo: {
        imap_host: 'imap.mail.yahoo.com',
        imap_port: 993,
        imap_encryption: 'ssl',
        pop3_host: 'pop.mail.yahoo.com',
        pop3_port: 995,
        pop3_encryption: 'ssl',
        smtp_host: 'smtp.mail.yahoo.com',
        smtp_port: 587,
        smtp_encryption: 'tls'
    }
};

$('#email_provider').on('change', function() {
    const provider = $(this).val();
    
    // Hide all preset info
    $('.preset-info').hide();
    
    // Update password help text based on provider
    const passwordHelp = $('#password-help');
    if (provider === 'gmail') {
        passwordHelp.html('For Gmail, use an <strong>App Password</strong> (not your regular password). To create one: Google Account → Security → 2-Step Verification → App Passwords');
    } else if (provider === 'yahoo') {
        passwordHelp.html('For Yahoo, use an <strong>App Password</strong>. Generate one from: Account Security → Generate app password');
    } else if (provider === 'outlook') {
        passwordHelp.html('For Outlook/Office 365, use an <strong>App Password</strong> (not your regular password). To create one: Microsoft Account → Security → Advanced security options → App passwords');
    } else {
        passwordHelp.html('Use the email account\'s password');
    }
    
    if (provider === 'custom') {
        // Clear all server configuration fields when "Custom / Other" is selected
        $('#imap_host').val('');
        $('#imap_port').val('');
        $('#imap_encryption').val('ssl');
        $('#pop3_host').val('');
        $('#pop3_port').val('');
        $('#pop3_encryption').val('ssl');
        $('#smtp_host').val('');
        $('#smtp_port').val('');
        $('#smtp_encryption').val('tls');
    } else if (provider && provider !== 'custom' && emailPresets[provider]) {
        const preset = emailPresets[provider];
        
        // Fill in the form fields
        $('#imap_host').val(preset.imap_host);
        $('#imap_port').val(preset.imap_port);
        $('#imap_encryption').val(preset.imap_encryption);
        if (preset.pop3_host) {
            $('#pop3_host').val(preset.pop3_host);
            $('#pop3_port').val(preset.pop3_port);
            $('#pop3_encryption').val(preset.pop3_encryption);
        }
        $('#smtp_host').val(preset.smtp_host);
        $('#smtp_port').val(preset.smtp_port);
        $('#smtp_encryption').val(preset.smtp_encryption);
        
        // Show preset info
        $('#' + provider + '-info').show();
    }
});

// Auto-fill username from email field and sync when email changes
$(document).ready(function() {
    // Function to sync username with email field
    function syncUsernameWithEmail() {
        const emailValue = $('#email').val();
        if (emailValue) {
            $('#username').val(emailValue);
        }
    }
    
    // Initial sync
    syncUsernameWithEmail();
    
    // Sync username whenever email field changes
    $('#email').on('input change blur', function() {
        syncUsernameWithEmail();
    });
    
    // Prevent modal from closing on outside click or escape key
    $('#faqModal').on('show.bs.modal', function (e) {
        // Ensure modal stays open
        $(this).css('display', 'block');
    });
    
    // Prevent form submission when clicking help buttons
    $('button[onclick*="faqModal"]').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#faqModal').modal('show');
        return false;
    });
    
    // Fix tab navigation in modal - prevent page jump but allow tab switching
    $('#faqModal .nav-tabs a').on('click', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        $(this).tab('show');
        // Prevent any page navigation
        return false;
    });
    
    // Ensure modal doesn't close unexpectedly
    $('#faqModal').modal({
        backdrop: true,
        keyboard: true,
        show: false
    });
});

function testConnection() {
    const form = $('#emailConfigForm');
    const formData = form.serialize();
    
    Swal.fire({
        title: 'Testing Connection...',
        text: 'Please wait while we test your email settings',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.ajax({
        url: '{{ route("mailbox.config.test") }}',
        method: 'POST',
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Connection Successful!',
                    text: 'Your email settings are correct. Do you want to save this configuration?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Save Configuration',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Submit the form to save configuration
                        $('#emailConfigForm').submit();
                    }
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Connection Failed',
                    html: (response.message || 'Unable to connect. Please check your settings.') + 
                          '<br><br><button type="button" class="btn btn-info btn-sm" onclick="$(\'#faqModal\').modal(\'show\'); Swal.close();">' +
                          '<i class="fa fa-question-circle"></i> View Help & Troubleshooting</button>',
                    confirmButtonText: 'OK',
                    showCancelButton: true,
                    cancelButtonText: 'View Help',
                    cancelButtonColor: '#3085d6'
                }).then((result) => {
                    if (result.dismiss === Swal.DismissReason.cancel) {
                        $('#faqModal').modal('show');
                    }
                });
            }
        },
        error: function(xhr) {
            let errorMsg = 'An error occurred while testing the connection.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
            }
            Swal.fire({
                icon: 'error',
                title: 'Connection Failed',
                html: errorMsg + 
                      '<br><br><button type="button" class="btn btn-info btn-sm" onclick="$(\'#faqModal\').modal(\'show\'); Swal.close();">' +
                      '<i class="fa fa-question-circle"></i> View Help & Troubleshooting</button>',
                confirmButtonText: 'OK',
                showCancelButton: true,
                cancelButtonText: 'View Help',
                cancelButtonColor: '#3085d6'
            }).then((result) => {
                if (result.dismiss === Swal.DismissReason.cancel) {
                    $('#faqModal').modal('show');
                }
            });
        }
    });
}
</script>

<script>
    function getEmailValue() {
        var emailInput = document.getElementById('email');
        return emailInput ? emailInput.value : '';
    }

    function buildOauthUrl(provider) {
        try {
            var base = '{{ url('/mailbox/oauth') }}/' + provider + '/redirect';
            var email = getEmailValue();
            if (email) {
                return base + '?email=' + encodeURIComponent(email);
            } else {
                // If no email entered, still allow OAuth (email will be taken from user account)
                return base;
            }
        } catch (e) {
            console.error('Error building OAuth URL:', e);
            return null;
        }
    }

    // Function to attach OAuth button handlers
    function attachOAuthHandlers() {
        var gmailBtn = document.getElementById('gmail-oauth-btn');
        var outlookBtn = document.getElementById('outlook-oauth-btn');
        var yahooBtn = document.getElementById('yahoo-oauth-btn');

        if (gmailBtn) {
            // Remove any existing listeners to avoid duplicates
            var newGmailBtn = gmailBtn.cloneNode(true);
            gmailBtn.parentNode.replaceChild(newGmailBtn, gmailBtn);
            newGmailBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                var oauthUrl = buildOauthUrl('google');
                console.log('Redirecting to Gmail OAuth URL:', oauthUrl);
                if (oauthUrl && oauthUrl !== 'undefined') {
                    window.location.href = oauthUrl;
                } else {
                    alert('Error: Could not build OAuth URL. Please check your email address.');
                }
                return false;
            });
        }

        if (outlookBtn) {
            var newOutlookBtn = outlookBtn.cloneNode(true);
            outlookBtn.parentNode.replaceChild(newOutlookBtn, outlookBtn);
            newOutlookBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                var oauthUrl = buildOauthUrl('outlook');
                console.log('Redirecting to Outlook OAuth URL:', oauthUrl);
                if (oauthUrl && oauthUrl !== 'undefined') {
                    window.location.href = oauthUrl;
                } else {
                    alert('Error: Could not build OAuth URL. Please check your email address.');
                }
                return false;
            });
        }

        if (yahooBtn) {
            var newYahooBtn = yahooBtn.cloneNode(true);
            yahooBtn.parentNode.replaceChild(newYahooBtn, yahooBtn);
            newYahooBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                var oauthUrl = buildOauthUrl('yahoo');
                console.log('Redirecting to Yahoo OAuth URL:', oauthUrl);
                if (oauthUrl && oauthUrl !== 'undefined') {
                    window.location.href = oauthUrl;
                } else {
                    alert('Error: Could not build OAuth URL. Please check your email address.');
                }
                return false;
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Attach handlers on page load
        attachOAuthHandlers();
        
        // Re-attach handlers when provider changes (in case buttons are recreated)
        $('#email_provider').on('change', function() {
            setTimeout(function() {
                attachOAuthHandlers();
            }, 100);
        });
    });
</script>
@endsection