<?php
require_once __DIR__ . '/include/support_bootstrap.php';
require_once __DIR__ . '/../conf/db.php';
require_once __DIR__ . '/../lib/support_auth.php';

// Giriş kontrolü - sadece agent
try {
    $user = require_support_panel_access();
    if ($user['type'] !== 'agent') {
        header('Location: login.php');
        exit;
    }
} catch (RuntimeException $e) {
    header('Location: login.php');
    exit;
}

$userName = htmlspecialchars($user['name'], ENT_QUOTES, 'UTF-8');
$userType = $user['type'];
$isAdmin = false; // Destek paneli sadece temsilciler için

require_once __DIR__ . '/../lib/support_helper.php';

$statuses = support_get_statuses(null)['list'];
$priorities = support_allowed_priorities();
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Destek Talepleri | NetGuard Destek Paneli</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/destek.css">
    <link rel="stylesheet" href="/assets/css/toast_notifications.css">
</head>
<body class="destek-panel">
    <?php include __DIR__ . '/include/header.php'; ?>
    
    <main class="destek-main">
        <div id="supportTicketsApp"
              data-statuses='<?= json_encode($statuses, JSON_UNESCAPED_UNICODE) ?>'
              data-priorities='<?= json_encode($priorities, JSON_UNESCAPED_UNICODE) ?>'
              data-user-type='<?= htmlspecialchars($userType, ENT_QUOTES, 'UTF-8') ?>'>

            <!-- İstatistik Kartları -->
            <section class="mb-4">
                <div class="row g-3" id="supportStatsCards">
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #3b82f6 !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-inbox text-primary" style="font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">Açık Talepler</h6>
                                <div class="h3 mb-0 fw-bold text-primary" id="statOpen">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #f59e0b !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-arrow-repeat text-warning" style="font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">Devam Ediyor</h6>
                                <div class="h3 mb-0 fw-bold text-warning" id="statInProgress">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #8b5cf6 !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-clock-history" style="color: #8b5cf6; font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">Müşteri Yanıtı Bekleniyor</h6>
                                <div class="h3 mb-0 fw-bold" style="color: #8b5cf6;" id="statWaitingReply">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #14b8a6 !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-reply-fill" style="color: #14b8a6; font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">Cevaplandı</h6>
                                <div class="h3 mb-0 fw-bold" style="color: #14b8a6;" id="statAnswered">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #22c55e !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-check-circle text-success" style="font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">Tamamlandı</h6>
                                <div class="h3 mb-0 fw-bold text-success" id="statCompleted">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="card border-0 shadow-sm text-center h-100 support-stat-card" style="border-left: 4px solid #ef4444 !important;">
                            <div class="card-body py-3">
                                <div class="mb-2">
                                    <i class="bi bi-x-circle text-danger" style="font-size: 1.25rem;"></i>
                                </div>
                                <h6 class="mb-2 fw-semibold small" style="color: var(--destek-text-muted);">İptal Edildi</h6>
                                <div class="h3 mb-0 fw-bold text-danger" id="statCancelled">-</div>
                                <small style="color: var(--destek-text-muted);">adet</small>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label text-uppercase small text-muted">Firma</label>
                                <select class="form-select form-select-sm" id="supportFilterCompany"></select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-uppercase small text-muted">Durum</label>
                                <select class="form-select form-select-sm" id="supportFilterStatus">
                                    <option value="">Tümü</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-uppercase small text-muted">Öncelik</label>
                                <select class="form-select form-select-sm" id="supportFilterPriority">
                                    <option value="">Tümü</option>
                                    <?php foreach ($priorities as $priority): ?>
                                        <option value="<?= htmlspecialchars($priority) ?>"><?= ucfirst($priority) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-uppercase small text-muted">Temsilci</label>
                                <select class="form-select form-select-sm" id="supportFilterAgent">
                                    <option value="">Tümü</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label text-uppercase small text-muted">Arama</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" id="supportFilterSearch" placeholder="Talep no, konu veya e-posta">
                                    <button class="btn btn-primary" id="supportFilterApply"><i class="bi bi-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="row g-4">
                <!-- Sol Menü: Durum Filtreleri -->
                <div class="col-12 col-lg-2 col-xl-2">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-header">
                                <h5 class="mb-0 fw-semibold">
                                    <i class="bi bi-funnel-fill me-2" style="color: var(--destek-primary);"></i>Durum Filtreleri
                                </h5>
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush" id="supportStatusMenu">
                                    <button class="list-group-item list-group-item-action status-menu-item active" data-status="" data-status-name="Tümü">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-list-ul me-2"></i>
                                                <span class="fw-semibold">Tümü</span>
                                            </span>
                                            <span class="badge bg-secondary" id="statAll">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="Açık" data-status-name="Açık">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-inbox text-primary me-2"></i>
                                                <span>Açık Talepler</span>
                                            </span>
                                            <span class="badge bg-primary" id="statOpenMenu">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="Devam Ediyor" data-status-name="Devam Ediyor">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-arrow-repeat text-warning me-2"></i>
                                                <span>Devam Ediyor</span>
                                            </span>
                                            <span class="badge bg-warning text-dark" id="statInProgressMenu">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="Müşteri Yanıtı Bekleniyor" data-status-name="Müşteri Yanıtı Bekleniyor">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-clock-history me-2" style="color: #8b5cf6;"></i>
                                                <span>Müşteri Yanıtı Bekleniyor</span>
                                            </span>
                                            <span class="badge" style="background-color: #8b5cf6; color: white;" id="statWaitingReplyMenu">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="Cevaplandı" data-status-name="Cevaplandı">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-reply-fill me-2" style="color: #14b8a6;"></i>
                                                <span>Cevaplandı</span>
                                            </span>
                                            <span class="badge" style="background-color: #14b8a6; color: white;" id="statAnsweredMenu">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="Tamamlandı" data-status-name="Tamamlandı">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-check-circle text-success me-2"></i>
                                                <span>Tamamlandı</span>
                                            </span>
                                            <span class="badge bg-success" id="statCompletedMenu">-</span>
                                        </div>
                                    </button>
                                    <button class="list-group-item list-group-item-action status-menu-item" data-status="İptal Edildi" data-status-name="İptal Edildi">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="bi bi-x-circle text-danger me-2"></i>
                                                <span>İptal Edildi</span>
                                            </span>
                                            <span class="badge bg-danger" id="statCancelledMenu">-</span>
                                        </div>
                                    </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sağ Taraf: Talep Listesi ve Detay -->
                <div class="col-12 col-lg-10 col-xl-10">
                    <div class="row g-4">
                        <!-- Talep Listesi -->
                        <div class="col-12 col-xl-4">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <div>
                                        <h2 class="h5 mb-0 fw-semibold">Talepler</h2>
                                        <p class="text-muted small mb-0" id="supportListSubtitle">Filtrelere göre listelenir</p>
                                    </div>
                                    <button class="btn btn-outline-secondary btn-sm" id="supportRefreshList">
                                        <i class="bi bi-arrow-repeat me-1"></i>Yenile
                                    </button>
                                </div>
                                <div class="card-body p-0">
                                    <div id="supportTicketList" class="list-group list-group-flush support-ticket-list" style="max-height: 600px; overflow-y: auto;">
                                        <div class="list-group-item text-center py-4 text-muted">
                                            <i class="bi bi-inbox me-2"></i>Veriler yükleniyor...
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center">
                                    <div id="supportTicketStats" class="small text-muted"></div>
                                    <div>
                                        <button class="btn btn-sm btn-outline-secondary" id="supportPrevPage">Önceki</button>
                                        <button class="btn btn-sm btn-outline-secondary" id="supportNextPage">Sonraki</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Talep Detayı -->
                        <div class="col-12 col-xl-8">
                            <div class="card border-0 shadow-sm h-100" id="supportTicketDetailCard">
                                <div class="card-body">
                                    <div class="text-center py-5" id="supportTicketPlaceholder" style="color: var(--destek-text-muted);">
                                        <i class="bi bi-chat-dots fs-1 mb-3 d-block" style="opacity: 0.5;"></i>
                                        <p class="mb-0">Bir talep seçerek detayları görüntüleyin.</p>
                                    </div>
                                    <div id="supportTicketDetail" class="d-none">
                                        <div class="d-flex justify-content-between align-items-start mb-3 pb-3 border-bottom" style="border-color: var(--destek-border) !important;">
                                            <div>
                                                <h3 class="h5 fw-bold mb-2" id="supportTicketSubject"></h3>
                                                <div class="small" id="supportTicketMeta" style="color: var(--destek-text-muted);"></div>
                                            </div>
                                            <div id="supportTicketBadges" class="text-end"></div>
                                        </div>
                                        <div class="mb-4">
                                            <div class="d-flex gap-2 flex-wrap">
                                                <button class="btn btn-primary btn-sm" id="supportReplyBtn">
                                                    <i class="bi bi-reply-fill me-1"></i>Cevap Yaz
                                                </button>
                                                <?php if ($isAdmin): ?>
                                                <button class="btn btn-outline-secondary btn-sm" id="supportAssignBtn">
                                                    <i class="bi bi-person-plus me-1"></i>Temsilci Ata
                                                </button>
                                                <?php endif; ?>
                                                <button class="btn btn-outline-secondary btn-sm" id="supportStatusBtn">
                                                    <i class="bi bi-pencil-square me-1"></i>Durum Güncelle
                                                </button>
                                                <?php if ($isAdmin): ?>
                                                <button class="btn btn-outline-danger btn-sm" id="supportDeleteBtn">
                                                    <i class="bi bi-trash me-1"></i>Sil
                                                </button>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <div id="supportTimeline" class="support-timeline"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
            </section>
        </div>
    </main>

    <!-- Modals -->
    <?php include __DIR__ . '/modals.php'; ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/toast_notifications.js"></script>
    <script src="/admin/assets/js/support.js"></script>
    <script src="assets/js/destek.js"></script>
    <script>
        // Destek paneli için özel ayarlar
        window.SUPPORT_PANEL_MODE = true;
        
        // Endpoint'leri /destek/ajax/ olarak override et
        if (window.SupportAPI) {
            const originalLoadTickets = window.SupportAPI.loadTickets;
            window.SupportAPI.loadTickets = function(page = 1, filters = {}, silent = false) {
                const params = new URLSearchParams({ page });
                Object.entries(filters).forEach(([key, value]) => {
                    if (value) params.append(key, value);
                });
                const url = `/destek/ajax/ticket_list.php?${params}`;
                if (!silent) console.log('Fetching tickets from:', url);
                return fetch(url, { credentials: 'same-origin' })
                    .then(resp => {
                        if (!resp.ok) {
                            const errorText = resp.text();
                            console.error('API Error Response:', resp.status, errorText);
                            throw new Error(`Ticket listesi yüklenemedi (${resp.status})`);
                        }
                        return resp.json();
                    });
            };
            
            const originalLoadStats = window.SupportAPI.loadStats;
            window.SupportAPI.loadStats = function() {
                return fetch('/destek/ajax/ticket_stats.php', { credentials: 'same-origin' })
                    .then(resp => {
                        if (!resp.ok) throw new Error('İstatistikler yüklenemedi');
                        return resp.json();
                    });
            };
            
            const originalLoadTicketDetail = window.SupportAPI.loadTicketDetail;
            window.SupportAPI.loadTicketDetail = function(ticketId) {
                return fetch(`/destek/ajax/ticket_detail.php?ticket_id=${ticketId}`, {
                    credentials: 'same-origin'
                })
                    .then(resp => {
                        if (!resp.ok) throw new Error('Ticket detayı yüklenemedi');
                        return resp.json();
                    });
            };
        }
        window.SUPPORT_USER_TYPE = '<?= htmlspecialchars($userType, ENT_QUOTES, 'UTF-8') ?>';
        
        // Endpoint'ler admin/ajax/ altında olduğu için path düzeltmesi gerekmez
        // Çünkü hem admin hem destek paneli aynı endpoint'leri kullanıyor
        
        // Dark tema yönetimi
        (() => {
            const themeToggle = document.getElementById('themeToggle');
            const themeIcon = document.getElementById('themeIcon');
            const html = document.documentElement;
            
            // Tema tercihini yükle
            const savedTheme = localStorage.getItem('destek-theme') || 'light';
            if (savedTheme === 'dark') {
                html.setAttribute('data-theme', 'dark');
                if (themeToggle) themeToggle.checked = true;
                if (themeIcon) themeIcon.className = 'bi bi-sun';
            }
            
            // Tema değiştirme
            if (themeToggle) {
                themeToggle.addEventListener('change', (e) => {
                    if (e.target.checked) {
                        html.setAttribute('data-theme', 'dark');
                        localStorage.setItem('destek-theme', 'dark');
                        if (themeIcon) themeIcon.className = 'bi bi-sun';
                    } else {
                        html.removeAttribute('data-theme');
                        localStorage.setItem('destek-theme', 'light');
                        if (themeIcon) themeIcon.className = 'bi bi-moon-stars';
                    }
                });
            }
        })();
    </script>
</body>
</html>

