<?php
require_once 'config.php';
require_once 'classes/Security.php';

$pageTitle = 'Support Center - CryptoExchange Pro | Help & Customer Service';
$pageDescription = 'Get help with your cryptocurrency trading questions. Access our comprehensive support center, submit tickets, and contact our 24/7 customer service team.';

$message = '';
$messageType = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_ticket'])) {
    if (!Security::validateCSRFToken($_POST['csrf_token'])) {
        $message = 'Invalid security token. Please try again.';
        $messageType = 'danger';
    } else {
        // Here you would typically save the support ticket to database
        $message = 'Support ticket submitted successfully! We will respond within 24 hours.';
        $messageType = 'success';
    }
}

include 'includes/header.php';
?>

<main style="min-height: 100vh; background-color: var(--bg-secondary); padding: 40px 0;">
    <div class="container">
        <!-- Header -->
        <div class="mb-4">
            <h1 style="font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;">
                <i class="fas fa-headset" style="color: var(--primary-color); margin-right: 16px;"></i>Support Center
            </h1>
            <p style="color: var(--text-secondary); font-size: 16px;">Get help with your cryptocurrency trading questions</p>
        </div>

        <!-- Alert Messages -->
        <?php if ($message): ?>
        <div class="alert alert-<?php echo $messageType; ?> fade-in mb-4">
            <div class="d-flex align-items-center">
                <div style="margin-right: 12px;">
                    <i class="fas <?php echo $messageType === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'; ?>"></i>
                </div>
                <div>
                    <p style="margin: 0; font-weight: 500;"><?php echo $message; ?></p>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <div class="row">
            <!-- Quick Help -->
            <div class="col-8">
                <!-- FAQ Section -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h2 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-question-circle" style="color: var(--primary-color); margin-right: 8px;"></i>
                            Frequently Asked Questions
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item" style="border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: 8px;">
                                <div class="accordion-header">
                                    <button class="accordion-button" style="background: var(--bg-primary); border: none; padding: 16px 20px; width: 100%; text-align: left; font-weight: 600;" onclick="toggleAccordion('faq1')">
                                        How do I verify my account?
                                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
                                    </button>
                                </div>
                                <div id="faq1" class="accordion-collapse" style="display: none;">
                                    <div class="accordion-body" style="padding: 16px 20px; border-top: 1px solid var(--border-color);">
                                        <p>To verify your account, go to the KYC Verification page and upload the required documents. You'll need to provide:</p>
                                        <ul>
                                            <li>Government-issued ID (passport, driver's license, or national ID)</li>
                                            <li>Proof of address (utility bill or bank statement)</li>
                                        </ul>
                                        <p>Verification typically takes 1-3 business days.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item" style="border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: 8px;">
                                <div class="accordion-header">
                                    <button class="accordion-button" style="background: var(--bg-primary); border: none; padding: 16px 20px; width: 100%; text-align: left; font-weight: 600;" onclick="toggleAccordion('faq2')">
                                        How does P2P trading work?
                                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
                                    </button>
                                </div>
                                <div id="faq2" class="accordion-collapse" style="display: none;">
                                    <div class="accordion-body" style="padding: 16px 20px; border-top: 1px solid var(--border-color);">
                                        <p>P2P (peer-to-peer) trading allows you to trade directly with other users:</p>
                                        <ol>
                                            <li>Browse available sell orders or create your own</li>
                                            <li>When matched, funds are locked in escrow</li>
                                            <li>Complete payment using the seller's preferred method</li>
                                            <li>Seller confirms payment and releases cryptocurrency</li>
                                        </ol>
                                        <p>Our escrow system protects both buyers and sellers throughout the process.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item" style="border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: 8px;">
                                <div class="accordion-header">
                                    <button class="accordion-button" style="background: var(--bg-primary); border: none; padding: 16px 20px; width: 100%; text-align: left; font-weight: 600;" onclick="toggleAccordion('faq3')">
                                        What are the trading fees?
                                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
                                    </button>
                                </div>
                                <div id="faq3" class="accordion-collapse" style="display: none;">
                                    <div class="accordion-body" style="padding: 16px 20px; border-top: 1px solid var(--border-color);">
                                        <p>Our trading fees are competitive and transparent:</p>
                                        <ul>
                                            <li>P2P Trading: 0.25% per transaction</li>
                                            <li>Minimum fee: 0.00000100 of the traded cryptocurrency</li>
                                            <li>Maximum fee: 1.00000000 of the traded cryptocurrency</li>
                                        </ul>
                                        <p>Fees are automatically calculated and displayed before you confirm any trade.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item" style="border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-bottom: 8px;">
                                <div class="accordion-header">
                                    <button class="accordion-button" style="background: var(--bg-primary); border: none; padding: 16px 20px; width: 100%; text-align: left; font-weight: 600;" onclick="toggleAccordion('faq4')">
                                        How secure is my account?
                                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
                                    </button>
                                </div>
                                <div id="faq4" class="accordion-collapse" style="display: none;">
                                    <div class="accordion-body" style="padding: 16px 20px; border-top: 1px solid var(--border-color);">
                                        <p>We implement multiple security layers to protect your account:</p>
                                        <ul>
                                            <li>SSL encryption for all data transmission</li>
                                            <li>Two-factor authentication (2FA)</li>
                                            <li>Cold storage for cryptocurrency funds</li>
                                            <li>Regular security audits and monitoring</li>
                                            <li>Account lockout protection against brute force attacks</li>
                                        </ul>
                                        <p>We recommend enabling 2FA and using a strong, unique password.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item" style="border: 1px solid var(--border-color); border-radius: var(--border-radius);">
                                <div class="accordion-header">
                                    <button class="accordion-button" style="background: var(--bg-primary); border: none; padding: 16px 20px; width: 100%; text-align: left; font-weight: 600;" onclick="toggleAccordion('faq5')">
                                        What if there's a dispute in my trade?
                                        <i class="fas fa-chevron-down" style="margin-left: auto;"></i>
                                    </button>
                                </div>
                                <div id="faq5" class="accordion-collapse" style="display: none;">
                                    <div class="accordion-body" style="padding: 16px 20px; border-top: 1px solid var(--border-color);">
                                        <p>If you encounter issues during a trade:</p>
                                        <ol>
                                            <li>Try to resolve the issue directly with the other party</li>
                                            <li>If unsuccessful, open a dispute from your trade details page</li>
                                            <li>Our support team will review the case within 24 hours</li>
                                            <li>We'll make a fair decision based on the evidence provided</li>
                                        </ol>
                                        <p>Keep all payment receipts and communication records as evidence.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Submit Ticket -->
                <div class="card">
                    <div class="card-header">
                        <h2 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-ticket-alt" style="color: var(--primary-color); margin-right: 8px;"></i>
                            Submit Support Ticket
                        </h2>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="">
                            <input type="hidden" name="csrf_token" value="<?php echo Security::generateCSRFToken(); ?>">
                            
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label class="form-label">Full Name *</label>
                                        <input type="text" name="full_name" class="form-control" required 
                                               value="<?php echo Security::isAuthenticated() ? ($_SESSION['first_name'] ?? '') . ' ' . ($_SESSION['last_name'] ?? '') : ''; ?>">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label class="form-label">Email Address *</label>
                                        <input type="email" name="email" class="form-control" required
                                               value="<?php echo Security::isAuthenticated() ? ($_SESSION['email'] ?? '') : ''; ?>">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Category *</label>
                                <select name="category" class="form-control form-select" required>
                                    <option value="">Select Category</option>
                                    <option value="account">Account Issues</option>
                                    <option value="trading">Trading Problems</option>
                                    <option value="kyc">KYC Verification</option>
                                    <option value="payment">Payment Issues</option>
                                    <option value="security">Security Concerns</option>
                                    <option value="technical">Technical Support</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Priority</label>
                                <select name="priority" class="form-control form-select">
                                    <option value="low">Low</option>
                                    <option value="medium" selected>Medium</option>
                                    <option value="high">High</option>
                                    <option value="urgent">Urgent</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Subject *</label>
                                <input type="text" name="subject" class="form-control" required placeholder="Brief description of your issue">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Message *</label>
                                <textarea name="message" class="form-control" rows="6" required placeholder="Please provide detailed information about your issue, including any error messages and steps to reproduce the problem."></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">Attachments</label>
                                <input type="file" name="attachments[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf,.txt">
                                <small style="color: var(--text-secondary); font-size: 12px;">You can attach screenshots, documents, or other relevant files (max 5MB each)</small>
                            </div>

                            <button type="submit" name="submit_ticket" class="btn btn-primary">
                                <i class="fas fa-paper-plane"></i> Submit Ticket
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="col-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-phone" style="color: var(--secondary-color); margin-right: 8px;"></i>
                            Contact Information
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="display: flex; flex-direction: column; gap: 20px;">
                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 40px; height: 40px; background: rgba(26, 115, 232, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-clock" style="color: var(--primary-color);"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: var(--text-primary);">24/7 Support</div>
                                    <div style="font-size: 14px; color: var(--text-secondary);">Available around the clock</div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 40px; height: 40px; background: rgba(52, 168, 83, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-envelope" style="color: var(--secondary-color);"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: var(--text-primary);">Email Support</div>
                                    <div style="font-size: 14px; color: var(--text-secondary);">support@cryptoexchange.pro</div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 40px; height: 40px; background: rgba(251, 188, 4, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-comments" style="color: var(--warning-color);"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: var(--text-primary);">Live Chat</div>
                                    <div style="font-size: 14px; color: var(--text-secondary);">Coming soon</div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 40px; height: 40px; background: rgba(234, 67, 53, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-phone" style="color: var(--danger-color);"></i>
                                </div>
                                <div>
                                    <div style="font-weight: 600; color: var(--text-primary);">Phone Support</div>
                                    <div style="font-size: 14px; color: var(--text-secondary);">+1-555-CRYPTO-1</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-book" style="color: var(--warning-color); margin-right: 8px;"></i>
                            Quick Links
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="display: flex; flex-direction: column; gap: 12px;">
                            <a href="knowledge.php" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
                                <i class="fas fa-arrow-right" style="margin-right: 8px; font-size: 12px;"></i>
                                Knowledge Base
                            </a>
                            <a href="trading.php" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
                                <i class="fas fa-arrow-right" style="margin-right: 8px; font-size: 12px;"></i>
                                Trading Guide
                            </a>
                            <a href="kyc.php" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
                                <i class="fas fa-arrow-right" style="margin-right: 8px; font-size: 12px;"></i>
                                KYC Verification
                            </a>
                            <a href="security.php" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
                                <i class="fas fa-arrow-right" style="margin-right: 8px; font-size: 12px;"></i>
                                Security Settings
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-shield-alt" style="color: var(--secondary-color); margin-right: 8px;"></i>
                            Security Notice
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning" style="margin: 0;">
                            <div style="font-weight: 600; margin-bottom: 8px;">
                                <i class="fas fa-exclamation-triangle"></i> Important
                            </div>
                            <p style="margin: 0; font-size: 14px;">
                                Our support team will never ask for your password, private keys, or 2FA codes. 
                                Always verify you're on the official website before entering sensitive information.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
function toggleAccordion(id) {
    const element = document.getElementById(id);
    const button = element.previousElementSibling.querySelector('button');
    const icon = button.querySelector('i');
    
    if (element.style.display === 'none') {
        element.style.display = 'block';
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
    } else {
        element.style.display = 'none';
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
    }
}
</script>

<?php include 'includes/footer.php'; ?>