<?php
/**
 * User Support Tickets Page
 */
require_once 'includes/db.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) { 
    header("Location: login"); 
    exit; 
}
$user_id = $_SESSION['user_id'];

// Fetch User Data for Profile Header
$u = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$u->execute([$user_id]);
$user = $u->fetch();

$success_msg = '';
$error_msg = '';

// Handle Ticket Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['open_ticket'])) {
    $subject = trim($_POST['subject']);
    $message = trim($_POST['message']);
    
    if (!empty($subject) && !empty($message)) {
        $stmt_t = $pdo->prepare("INSERT INTO support_tickets (user_id, subject, message, status) VALUES (?, ?, ?, 'open')");
        $stmt_t->execute([$user_id, $subject, $message]);
        $success_msg = "Your ticket has been submitted successfully!";
    } else {
        $error_msg = "Please fill in all fields.";
    }
}

// Fetch Tickets
$tickets = $pdo->prepare("SELECT * FROM support_tickets WHERE user_id = ? ORDER BY id DESC");
$tickets->execute([$user_id]);
$user_tickets = $tickets->fetchAll();

$page_title = 'Support Center';
require_once 'includes/header.php';
?>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Serif+Bengali:wght@300;400;500;600;700&display=swap');

    body { 
        background-color: #f8fafc; 
        color: #334155; 
        font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important;
        margin: 0;
        padding: 0;
    }

    /* Hide the default website header to make it a full page app-like view */
    header, .main-header { 
        display: none !important; 
    }
    
    .account-wrapper { 
        margin: 0 auto 100px;
        max-width: 100%; 
    }

    /* Full Width Top App Bar */
    .app-header {
        display: flex;
        align-items: center;
        gap: 15px;
        background: #00059E;
        color: #ffffff;
        padding: 16px 20px;
        position: sticky;
        top: 0;
        z-index: 999;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-back {
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .section-title { 
        font-size: 1.25rem; 
        font-weight: 700; 
        color: #ffffff; 
        margin: 0; 
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Main Content Area */
    .main-content {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

    .alert {
        padding: 15px; 
        border-radius: 8px; 
        margin-bottom: 25px; 
        font-weight: 600; 
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .alert-success { background: #ecfdf5; color: #10b981; border: 1px solid #a7f3d0; }
    .alert-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }

    /* Form Styles */
    .ticket-form-box {
        background: #ffffff; 
        padding: 25px; 
        border-radius: 8px; 
        border: 1px solid #e2e8f0; 
        margin-bottom: 40px;
    }
    
    .form-group { margin-bottom: 15px; }
    
    .form-control { 
        width: 100%; 
        padding: 12px 15px; 
        border: 1px solid #e2e8f0; 
        border-radius: 6px; 
        font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important; 
        font-size: 0.95rem; 
        color: #334155;
        outline: none; 
        transition: border-color 0.3s;
        box-sizing: border-box;
    }
    
    .form-control:focus {
        border-color: #00059E;
    }

    .btn-submit {
        background: #00059E;
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        font-weight: 700;
        border: none;
        cursor: pointer;
        font-family: 'Roboto', 'Noto Serif Bengali', sans-serif !important;
        transition: background 0.3s;
        display: inline-block;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .btn-submit:hover {
        background: #00037a;
    }

    /* Ticket List */
    .ticket-list {
        display: flex; 
        flex-direction: column; 
        gap: 15px;
    }

    .ticket-item {
        border: 1px solid #e2e8f0; 
        border-radius: 8px; 
        padding: 20px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        background: #ffffff; 
        transition: border-color 0.2s;
    }

    .ticket-item:hover {
        border-color: #cbd5e1;
    }

    .ticket-subject {
        font-weight: 700; 
        font-size: 1.05rem; 
        color: #0f172a; 
        margin-bottom: 5px;
    }

    .ticket-date {
        font-size: 0.85rem; 
        color: #64748b;
    }

    .empty-state { 
        color: #64748b; 
        padding: 40px 20px; 
        text-align: center; 
        border: 1px solid #e2e8f0; 
        border-radius: 8px; 
        background: #f8fafc;
    }

    .status-pill {
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .status-open { background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; }
    .status-closed { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
    .status-answered { background: #ecfdf5; color: #10b981; border: 1px solid #a7f3d0; }
</style>

<div class="account-wrapper">
    
    <div class="app-header">
        <a href="account" class="btn-back">
            <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
        </a>
        <h2 class="section-title">
            Support Center
        </h2>
    </div>

    <div class="main-content">

        <?php if($success_msg): ?>
            <div class="alert alert-success">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                <?php echo $success_msg; ?>
            </div>
        <?php endif; ?>

        <?php if($error_msg): ?>
            <div class="alert alert-danger">
                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                <?php echo $error_msg; ?>
            </div>
        <?php endif; ?>

        <div class="ticket-form-box">
            <h3 style="margin: 0 0 20px 0; font-size: 1.1rem; color: #0f172a;">Open a New Ticket</h3>
            <form action="account_tickets" method="POST">
                <input type="hidden" name="open_ticket" value="1">
                <div class="form-group">
                    <input type="text" name="subject" class="form-control" placeholder="Subject (e.g. Download Issue)" required>
                </div>
                <div class="form-group">
                    <textarea name="message" class="form-control" placeholder="Describe your problem in detail..." required style="min-height: 120px; resize: vertical;"></textarea>
                </div>
                <button type="submit" class="btn-submit">Submit Ticket</button>
            </form>
        </div>

        <h3 style="font-size: 1.2rem; margin-bottom: 20px; font-weight: 700; color: #0f172a;">Ticket History</h3>

        <?php if(empty($user_tickets)): ?>
            <div class="empty-state">
                You haven't opened any support tickets yet.
            </div>
        <?php else: ?>
            <div class="ticket-list">
                <?php foreach($user_tickets as $t): ?>
                    <div class="ticket-item">
                        <div>
                            <div class="ticket-subject"><?php echo htmlspecialchars($t['subject']); ?></div>
                            <div class="ticket-date">Submitted on <?php echo date('d M, Y', strtotime($t['created_at'])); ?></div>
                        </div>
                        <span class="status-pill status-<?php echo strtolower($t['status']); ?>"><?php echo ucfirst(htmlspecialchars($t['status'])); ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

    </div>
</div>

<?php require_once 'includes/mobile-nav.php'; ?>
