<?php
/**
 * SMM Paket Satış Scripti - Popup Yönetimi
 * @version 1.0.0
 */

// Config dahil et
if (!defined('SITE_VERSION')) {
    require_once __DIR__ . '/../config.php';
}

// Admin kontrolü
if (!isLoggedIn() || !isAdmin()) {
    setFlash('error', 'Bu sayfaya erişim yetkiniz yok.');
    redirect(SITE_URL . '/giris.php');
    exit;
}

// Uploads klasörü kontrolü
$uploadDir = __DIR__ . '/../uploads/popups/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// İşlemler
$action = $_GET['action'] ?? 'list';
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

// Popup Silme
if ($action === 'delete' && $id > 0) {
    try {
        // Resmi sil
        $stmt = $db->prepare("SELECT image FROM popups WHERE id = ?");
        $stmt->execute([$id]);
        $popup = $stmt->fetch(PDO::FETCH_ASSOC);
        
        if ($popup && $popup['image']) {
            $imagePath = $uploadDir . $popup['image'];
            if (file_exists($imagePath)) {
                unlink($imagePath);
            }
        }
        
        $stmt = $db->prepare("DELETE FROM popups WHERE id = ?");
        $stmt->execute([$id]);
        setFlash('success', 'Popup başarıyla silindi.');
    } catch (PDOException $e) {
        setFlash('error', 'Popup silinirken hata oluştu.');
    }
    redirect(SITE_URL . '/admin/popuplar.php');
    exit;
}

// Popup Durumu Değiştirme
if ($action === 'toggle' && $id > 0) {
    try {
        $stmt = $db->prepare("UPDATE popups SET is_active = NOT is_active WHERE id = ?");
        $stmt->execute([$id]);
        setFlash('success', 'Popup durumu güncellendi.');
    } catch (PDOException $e) {
        setFlash('error', 'Durum güncellenirken hata oluştu.');
    }
    redirect(SITE_URL . '/admin/popuplar.php');
    exit;
}

// Form verileri için varsayılan değerler
$formData = [
    'title' => '',
    'content' => '',
    'image' => '',
    'button_text' => '',
    'button_url' => '',
    'button_color' => '#6366f1',
    'position' => 'center',
    'size' => 'medium',
    'animation' => 'fade',
    'show_close_button' => 1,
    'close_on_overlay' => 1,
    'show_delay' => 0,
    'display_frequency' => 'once_per_session',
    'start_date' => '',
    'end_date' => '',
    'target_audience' => 'all',
    'priority' => 0,
    'is_active' => 1
];
$editId = 0;
$editPopup = null;

// Düzenleme için popup bilgisi
if ($action === 'edit' && $id > 0) {
    $stmt = $db->prepare("SELECT * FROM popups WHERE id = ?");
    $stmt->execute([$id]);
    $editPopup = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$editPopup) {
        setFlash('error', 'Popup bulunamadı.');
        redirect(SITE_URL . '/admin/popuplar.php');
        exit;
    }
    
    $formData = [
        'title' => $editPopup['title'],
        'content' => $editPopup['content'] ?? '',
        'image' => $editPopup['image'] ?? '',
        'button_text' => $editPopup['button_text'] ?? '',
        'button_url' => $editPopup['button_url'] ?? '',
        'button_color' => $editPopup['button_color'] ?? '#6366f1',
        'position' => $editPopup['position'] ?? 'center',
        'size' => $editPopup['size'] ?? 'medium',
        'animation' => $editPopup['animation'] ?? 'fade',
        'show_close_button' => $editPopup['show_close_button'] ?? 1,
        'close_on_overlay' => $editPopup['close_on_overlay'] ?? 1,
        'show_delay' => $editPopup['show_delay'] ?? 0,
        'display_frequency' => $editPopup['display_frequency'] ?? 'once_per_session',
        'start_date' => $editPopup['start_date'] ?? '',
        'end_date' => $editPopup['end_date'] ?? '',
        'target_audience' => $editPopup['target_audience'] ?? 'all',
        'priority' => $editPopup['priority'] ?? 0,
        'is_active' => $editPopup['is_active'] ?? 1
    ];
    $editId = $editPopup['id'];
}

// Form Gönderimi
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $formData = [
        'title' => trim($_POST['title'] ?? ''),
        'content' => trim($_POST['content'] ?? ''),
        'image' => trim($_POST['current_image'] ?? ''),
        'button_text' => trim($_POST['button_text'] ?? ''),
        'button_url' => trim($_POST['button_url'] ?? ''),
        'button_color' => $_POST['button_color'] ?? '#6366f1',
        'position' => $_POST['position'] ?? 'center',
        'size' => $_POST['size'] ?? 'medium',
        'animation' => $_POST['animation'] ?? 'fade',
        'show_close_button' => isset($_POST['show_close_button']) ? 1 : 0,
        'close_on_overlay' => isset($_POST['close_on_overlay']) ? 1 : 0,
        'show_delay' => (int)($_POST['show_delay'] ?? 0),
        'display_frequency' => $_POST['display_frequency'] ?? 'once_per_session',
        'start_date' => !empty($_POST['start_date']) ? $_POST['start_date'] : null,
        'end_date' => !empty($_POST['end_date']) ? $_POST['end_date'] : null,
        'target_audience' => $_POST['target_audience'] ?? 'all',
        'priority' => (int)($_POST['priority'] ?? 0),
        'is_active' => isset($_POST['is_active']) ? 1 : 0
    ];
    $editId = (int)($_POST['edit_id'] ?? 0);
    
    $errors = [];
    
    // Validasyon
    if (empty($formData['title'])) {
        $errors[] = 'Popup başlığı zorunludur.';
    }
    
    // Resim yükleme
    if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
        $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
        $maxSize = 5 * 1024 * 1024; // 5MB
        
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $fileType = finfo_file($finfo, $_FILES['image']['tmp_name']);
        finfo_close($finfo);
        
        if (!in_array($fileType, $allowedTypes)) {
            $errors[] = 'Sadece JPG, PNG, GIF veya WEBP dosyası yükleyebilirsiniz.';
        } elseif ($_FILES['image']['size'] > $maxSize) {
            $errors[] = 'Dosya boyutu 5MB\'dan büyük olamaz.';
        } else {
            // Eski resmi sil
            if ($editId > 0 && !empty($formData['image'])) {
                $oldImage = $uploadDir . $formData['image'];
                if (file_exists($oldImage)) {
                    unlink($oldImage);
                }
            }
            
            $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            $fileName = 'popup_' . time() . '_' . bin2hex(random_bytes(4)) . '.' . $ext;
            $uploadPath = $uploadDir . $fileName;
            
            if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadPath)) {
                $formData['image'] = $fileName;
            } else {
                $errors[] = 'Resim yüklenirken hata oluştu.';
            }
        }
    }
    
    // Resim silme
    if (isset($_POST['remove_image']) && $_POST['remove_image'] == '1') {
        if (!empty($formData['image'])) {
            $oldImage = $uploadDir . $formData['image'];
            if (file_exists($oldImage)) {
                unlink($oldImage);
            }
        }
        $formData['image'] = '';
    }
    
    if (empty($errors)) {
        try {
            if ($editId > 0) {
                $stmt = $db->prepare("
                    UPDATE popups SET 
                        title = ?, content = ?, image = ?, button_text = ?, button_url = ?,
                        button_color = ?, position = ?, size = ?, animation = ?,
                        show_close_button = ?, close_on_overlay = ?, show_delay = ?,
                        display_frequency = ?, start_date = ?, end_date = ?,
                        target_audience = ?, priority = ?, is_active = ?
                    WHERE id = ?
                ");
                $stmt->execute([
                    $formData['title'], $formData['content'], $formData['image'],
                    $formData['button_text'], $formData['button_url'], $formData['button_color'],
                    $formData['position'], $formData['size'], $formData['animation'],
                    $formData['show_close_button'], $formData['close_on_overlay'], $formData['show_delay'],
                    $formData['display_frequency'], $formData['start_date'], $formData['end_date'],
                    $formData['target_audience'], $formData['priority'], $formData['is_active'],
                    $editId
                ]);
                setFlash('success', 'Popup başarıyla güncellendi.');
            } else {
                $stmt = $db->prepare("
                    INSERT INTO popups (
                        title, content, image, button_text, button_url, button_color,
                        position, size, animation, show_close_button, close_on_overlay,
                        show_delay, display_frequency, start_date, end_date,
                        target_audience, priority, is_active
                    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                ");
                $stmt->execute([
                    $formData['title'], $formData['content'], $formData['image'],
                    $formData['button_text'], $formData['button_url'], $formData['button_color'],
                    $formData['position'], $formData['size'], $formData['animation'],
                    $formData['show_close_button'], $formData['close_on_overlay'], $formData['show_delay'],
                    $formData['display_frequency'], $formData['start_date'], $formData['end_date'],
                    $formData['target_audience'], $formData['priority'], $formData['is_active']
                ]);
                setFlash('success', 'Popup başarıyla eklendi.');
            }
            redirect(SITE_URL . '/admin/popuplar.php');
            exit;
        } catch (PDOException $e) {
            setFlash('error', 'Veritabanı hatası: ' . $e->getMessage());
        }
    } else {
        setFlash('error', implode('<br>', $errors));
    }
}

// Popup listesi
try {
    $popups = $db->query("SELECT * FROM popups ORDER BY priority DESC, created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $popups = [];
}

// İstatistikler
$totalPopups = count($popups);
$activePopupsCount = count(array_filter($popups, fn($p) => $p['is_active'] == 1));
$totalViews = array_sum(array_column($popups, 'view_count'));
$totalClicks = array_sum(array_column($popups, 'click_count'));

$adminPageTitle = ($action === 'edit' || $action === 'add') ? ($editId > 0 ? 'Popup Düzenle' : 'Yeni Popup') : 'Popup Yönetimi';
require_once __DIR__ . '/header.php';
?>

<style>
/* ==================== POPUP YÖNETİMİ STİLLERİ ==================== */

/* İstatistik Kartları */
.pp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pp-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pp-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pp-stat-icon.purple { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.pp-stat-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.pp-stat-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.pp-stat-icon.yellow { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

.pp-stat-info h3 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 2px;
    color: #f1f5f9;
}

.pp-stat-info span {
    font-size: 13px;
    color: #94a3b8;
}

/* Ana Grid */
.pp-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 24px;
    align-items: start;
}

.pp-grid.full {
    grid-template-columns: 1fr;
}

/* Kart */
.pp-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.pp-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.2);
}

.pp-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-card-title i {
    color: var(--primary);
}

.pp-card-badge {
    font-size: 13px;
    color: #94a3b8;
}

.pp-card-body {
    padding: 22px;
}

/* Form Bölümleri */
.pp-form-section {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}

.pp-form-section:last-of-type {
    margin-bottom: 0;
}

.pp-form-title {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-form-title i {
    color: var(--primary);
    font-size: 14px;
}

.pp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pp-form-row.triple {
    grid-template-columns: 1fr 1fr 1fr;
}

.pp-form-group {
    margin-bottom: 14px;
}

.pp-form-group:last-child {
    margin-bottom: 0;
}

.pp-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.pp-form-input {
    width: 100%;
    padding: 11px 14px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 14px;
    transition: all 0.2s;
}

.pp-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.pp-form-input::placeholder {
    color: #64748b;
}

.pp-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.pp-form-select {
    width: 100%;
    padding: 11px 14px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 14px;
    cursor: pointer;
}

.pp-form-select:focus {
    outline: none;
    border-color: var(--primary);
}

.pp-form-hint {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
}

/* Color Picker */
.pp-color-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-color-picker input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.pp-color-picker input[type="text"] {
    flex: 1;
}

/* Upload Area */
.pp-upload-area {
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.pp-upload-area:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.pp-upload-icon {
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-rgb), 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
    color: var(--primary);
}

.pp-upload-text {
    font-size: 14px;
    color: #e2e8f0;
    margin-bottom: 5px;
}

.pp-upload-hint {
    font-size: 12px;
    color: #64748b;
}

.pp-upload-input {
    display: none;
}

/* Image Preview */
.pp-image-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
}

.pp-image-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.pp-image-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
}

.pp-image-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.pp-image-btn.change {
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
}

.pp-image-btn.remove {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

.pp-image-btn:hover {
    transform: scale(1.1);
}

/* Checkbox */
.pp-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pp-checkbox:hover {
    border-color: var(--primary);
}

.pp-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.pp-checkbox-label {
    font-size: 13px;
    color: #e2e8f0;
}

/* Submit */
.pp-submit-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--gradient);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    transition: all 0.2s;
}

.pp-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
}

.pp-cancel-btn {
    padding: 8px 14px;
    background: #334155;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.pp-cancel-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* Popup Listesi */
.pp-list {
    display: flex;
    flex-direction: column;
}

.pp-list-empty {
    text-align: center;
    padding: 50px 20px;
}

.pp-list-empty i {
    font-size: 48px;
    color: #334155;
    margin-bottom: 16px;
}

.pp-list-empty h4 {
    font-size: 17px;
    color: #e2e8f0;
    margin: 0 0 8px;
}

.pp-list-empty p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Popup Item */
.pp-item {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s;
}

.pp-item:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.pp-item:last-child {
    border-bottom: none;
}

.pp-item-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.pp-item-image {
    width: 100px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-item-image i {
    font-size: 28px;
    color: #334155;
}

.pp-item-info {
    flex: 1;
    min-width: 0;
}

.pp-item-title {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-item-title .priority {
    font-size: 10px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 2px 8px;
    border-radius: 10px;
}

.pp-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

.pp-item-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pp-item-meta i {
    font-size: 11px;
    opacity: 0.7;
}

.pp-item-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.pp-info-box {
    background: #0f172a;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.pp-info-box h6 {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}

.pp-info-box p {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

.pp-info-box p.views {
    color: #60a5fa;
}

.pp-info-box p.clicks {
    color: #34d399;
}

.pp-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.pp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.pp-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.pp-status.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.pp-status.scheduled {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.pp-status.expired {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.pp-actions {
    display: flex;
    gap: 8px;
}

.pp-action-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.1);
    background: #0f172a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 14px;
}

.pp-action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

.pp-action-btn.preview:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.pp-action-btn.toggle-on {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.pp-action-btn.toggle-off {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.pp-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #f87171;
}

/* Preview Modal */
.pp-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pp-preview-overlay.show {
    display: flex;
}

.pp-preview-container {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    overflow: hidden;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.pp-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}

.pp-preview-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.pp-preview-image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

.pp-preview-content {
    padding: 28px;
}

.pp-preview-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}

.pp-preview-text {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 20px;
}

.pp-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

/* Responsive */
@media (max-width: 1199px) {
    .pp-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pp-grid {
        grid-template-columns: 1fr;
    }
    
    .pp-item-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .pp-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .pp-card-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .pp-card-body {
        padding: 16px;
    }
    
    .pp-form-section {
        padding: 14px;
    }
    
    .pp-form-row {
        grid-template-columns: 1fr;
    }
    
    .pp-form-row.triple {
        grid-template-columns: 1fr;
    }
    
    .pp-item {
        padding: 16px;
    }
    
    .pp-item-header {
        flex-direction: column;
    }
    
    .pp-item-image {
        width: 100%;
        height: 120px;
    }
    
    .pp-item-body {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pp-item-footer {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .pp-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
</style>
<!-- İstatistikler -->
<div class="pp-stats">
    <div class="pp-stat-card">
        <div class="pp-stat-icon purple">
            <i class="fas fa-window-restore"></i>
        </div>
        <div class="pp-stat-info">
            <h3><?php echo $totalPopups; ?></h3>
            <span>Toplam Popup</span>
        </div>
    </div>
    <div class="pp-stat-card">
        <div class="pp-stat-icon green">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="pp-stat-info">
            <h3><?php echo $activePopupsCount; ?></h3>
            <span>Aktif Popup</span>
        </div>
    </div>
    <div class="pp-stat-card">
        <div class="pp-stat-icon blue">
            <i class="fas fa-eye"></i>
        </div>
        <div class="pp-stat-info">
            <h3><?php echo number_format($totalViews); ?></h3>
            <span>Toplam Görüntüleme</span>
        </div>
    </div>
    <div class="pp-stat-card">
        <div class="pp-stat-icon yellow">
            <i class="fas fa-mouse-pointer"></i>
        </div>
        <div class="pp-stat-info">
            <h3><?php echo number_format($totalClicks); ?></h3>
            <span>Toplam Tıklama</span>
        </div>
    </div>
</div>

<!-- Ana İçerik -->
<div class="pp-grid <?php echo ($action === 'list' && empty($popups)) ? 'full' : ''; ?>">
    
    <!-- Sol: Form -->
    <div class="pp-card">
        <div class="pp-card-header">
            <h5 class="pp-card-title">
                <i class="fas fa-<?php echo $editPopup ? 'edit' : 'plus-circle'; ?>"></i>
                <?php echo $editPopup ? 'Popup Düzenle' : 'Yeni Popup Ekle'; ?>
            </h5>
            <?php if ($editPopup): ?>
            <a href="<?php echo SITE_URL; ?>/admin/popuplar.php" class="pp-cancel-btn">
                <i class="fas fa-times"></i> İptal
            </a>
            <?php endif; ?>
        </div>
        <div class="pp-card-body">
            <form method="POST" action="" enctype="multipart/form-data">
                <input type="hidden" name="edit_id" value="<?php echo $editId; ?>">
                <input type="hidden" name="current_image" value="<?php echo clean($formData['image']); ?>">
                <input type="hidden" name="remove_image" id="removeImage" value="0">
                
                <!-- Temel Bilgiler -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-info-circle"></i> Temel Bilgiler
                    </div>
                    
                    <div class="pp-form-group">
                        <label class="pp-form-label">Popup Başlığı *</label>
                        <input type="text" class="pp-form-input" name="title" 
                               value="<?php echo clean($formData['title']); ?>" 
                               placeholder="Özel Kampanya!" required>
                    </div>
                    
                    <div class="pp-form-group">
                        <label class="pp-form-label">İçerik (HTML Destekli)</label>
                        <textarea class="pp-form-input pp-form-textarea" name="content" 
                                  placeholder="Popup içeriğini buraya yazın..."><?php echo clean($formData['content']); ?></textarea>
                        <div class="pp-form-hint">HTML etiketleri kullanabilirsiniz: &lt;b&gt;, &lt;i&gt;, &lt;br&gt;, &lt;p&gt;</div>
                    </div>
                </div>
                
                <!-- Resim -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-image"></i> Popup Resmi (Opsiyonel)
                    </div>
                    
                    <?php if (!empty($formData['image'])): ?>
                    <div class="pp-image-preview" id="imagePreview">
                        <img src="<?php echo SITE_URL; ?>/uploads/popups/<?php echo clean($formData['image']); ?>" alt="Popup Resmi">
                        <div class="pp-image-actions">
                            <button type="button" class="pp-image-btn change" onclick="document.getElementById('imageInput').click()" title="Değiştir">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                            <button type="button" class="pp-image-btn remove" onclick="removeImage()" title="Kaldır">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <?php else: ?>
                    <div class="pp-upload-area" id="uploadArea" onclick="document.getElementById('imageInput').click()">
                        <div class="pp-upload-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                        <div class="pp-upload-text">Resim yüklemek için tıklayın</div>
                        <div class="pp-upload-hint">JPG, PNG, GIF, WEBP - Max 5MB</div>
                    </div>
                    <?php endif; ?>
                    
                    <input type="file" name="image" id="imageInput" class="pp-upload-input" accept="image/*" onchange="previewImage(this)">
                    
                    <div class="pp-image-preview" id="newImagePreview" style="display: none; margin-top: 15px;">
                        <img src="" alt="Yeni Resim" id="newImageImg">
                        <div class="pp-image-actions">
                            <button type="button" class="pp-image-btn remove" onclick="clearNewImage()" title="Kaldır">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Buton -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-hand-pointer"></i> Aksiyon Butonu (Opsiyonel)
                    </div>
                    
                    <div class="pp-form-row">
                        <div class="pp-form-group">
                            <label class="pp-form-label">Buton Yazısı</label>
                            <input type="text" class="pp-form-input" name="button_text" 
                                   value="<?php echo clean($formData['button_text']); ?>" 
                                   placeholder="Hemen İncele">
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Buton Rengi</label>
                            <div class="pp-color-picker">
                                <input type="color" name="button_color" value="<?php echo $formData['button_color']; ?>" id="btnColor">
                                <input type="text" class="pp-form-input" value="<?php echo $formData['button_color']; ?>" id="btnColorText" onchange="document.getElementById('btnColor').value = this.value">
                            </div>
                        </div>
                    </div>
                    
                    <div class="pp-form-group">
                        <label class="pp-form-label">Buton Linki</label>
                        <input type="url" class="pp-form-input" name="button_url" 
                               value="<?php echo clean($formData['button_url']); ?>" 
                               placeholder="https://site.com/kampanya">
                    </div>
                </div>
                
                <!-- Görünüm -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-palette"></i> Görünüm Ayarları
                    </div>
                    
                    <div class="pp-form-row triple">
                        <div class="pp-form-group">
                            <label class="pp-form-label">Konum</label>
                            <select class="pp-form-select" name="position">
                                <option value="center" <?php echo $formData['position'] === 'center' ? 'selected' : ''; ?>>Ortada</option>
                                <option value="bottom-right" <?php echo $formData['position'] === 'bottom-right' ? 'selected' : ''; ?>>Sağ Alt</option>
                                <option value="bottom-left" <?php echo $formData['position'] === 'bottom-left' ? 'selected' : ''; ?>>Sol Alt</option>
                                <option value="top-right" <?php echo $formData['position'] === 'top-right' ? 'selected' : ''; ?>>Sağ Üst</option>
                                <option value="top-left" <?php echo $formData['position'] === 'top-left' ? 'selected' : ''; ?>>Sol Üst</option>
                            </select>
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Boyut</label>
                            <select class="pp-form-select" name="size">
                                <option value="small" <?php echo $formData['size'] === 'small' ? 'selected' : ''; ?>>Küçük (380px)</option>
                                <option value="medium" <?php echo $formData['size'] === 'medium' ? 'selected' : ''; ?>>Orta (520px)</option>
                                <option value="large" <?php echo $formData['size'] === 'large' ? 'selected' : ''; ?>>Büyük (700px)</option>
                            </select>
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Animasyon</label>
                            <select class="pp-form-select" name="animation">
                                <option value="fade" <?php echo $formData['animation'] === 'fade' ? 'selected' : ''; ?>>Fade</option>
                                <option value="slide" <?php echo $formData['animation'] === 'slide' ? 'selected' : ''; ?>>Slide</option>
                                <option value="zoom" <?php echo $formData['animation'] === 'zoom' ? 'selected' : ''; ?>>Zoom</option>
                                <option value="bounce" <?php echo $formData['animation'] === 'bounce' ? 'selected' : ''; ?>>Bounce</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="pp-form-row">
                        <label class="pp-checkbox">
                            <input type="checkbox" name="show_close_button" value="1" 
                                   <?php echo $formData['show_close_button'] ? 'checked' : ''; ?>>
                            <span class="pp-checkbox-label">Kapatma butonu göster</span>
                        </label>
                        <label class="pp-checkbox">
                            <input type="checkbox" name="close_on_overlay" value="1" 
                                   <?php echo $formData['close_on_overlay'] ? 'checked' : ''; ?>>
                            <span class="pp-checkbox-label">Dışına tıklayınca kapat</span>
                        </label>
                    </div>
                </div>
                
                <!-- Zamanlama -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-clock"></i> Zamanlama
                    </div>
                    
                    <div class="pp-form-row">
                        <div class="pp-form-group">
                            <label class="pp-form-label">Gösterim Gecikmesi (Saniye)</label>
                            <input type="number" class="pp-form-input" name="show_delay" 
                                   value="<?php echo $formData['show_delay']; ?>" 
                                   min="0" max="60" placeholder="0">
                            <div class="pp-form-hint">Sayfa açıldıktan kaç saniye sonra gösterilsin?</div>
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Gösterim Sıklığı</label>
                            <select class="pp-form-select" name="display_frequency">
                                <option value="always" <?php echo $formData['display_frequency'] === 'always' ? 'selected' : ''; ?>>Her Zaman</option>
                                <option value="once" <?php echo $formData['display_frequency'] === 'once' ? 'selected' : ''; ?>>Sadece Bir Kez</option>
                                <option value="once_per_session" <?php echo $formData['display_frequency'] === 'once_per_session' ? 'selected' : ''; ?>>Oturum Başına Bir Kez</option>
                                <option value="once_per_day" <?php echo $formData['display_frequency'] === 'once_per_day' ? 'selected' : ''; ?>>Günde Bir Kez</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="pp-form-row">
                        <div class="pp-form-group">
                            <label class="pp-form-label">Başlangıç Tarihi</label>
                            <input type="datetime-local" class="pp-form-input" name="start_date" 
                                   value="<?php echo $formData['start_date'] ? date('Y-m-d\TH:i', strtotime($formData['start_date'])) : ''; ?>">
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Bitiş Tarihi</label>
                            <input type="datetime-local" class="pp-form-input" name="end_date" 
                                   value="<?php echo $formData['end_date'] ? date('Y-m-d\TH:i', strtotime($formData['end_date'])) : ''; ?>">
                        </div>
                    </div>
                </div>
                
                <!-- Hedefleme -->
                <div class="pp-form-section">
                    <div class="pp-form-title">
                        <i class="fas fa-bullseye"></i> Hedefleme
                    </div>
                    
                    <div class="pp-form-row">
                        <div class="pp-form-group">
                            <label class="pp-form-label">Hedef Kitle</label>
                            <select class="pp-form-select" name="target_audience">
                                <option value="all" <?php echo $formData['target_audience'] === 'all' ? 'selected' : ''; ?>>Herkese Göster</option>
                                <option value="guests" <?php echo $formData['target_audience'] === 'guests' ? 'selected' : ''; ?>>Sadece Misafirler</option>
                                <option value="members" <?php echo $formData['target_audience'] === 'members' ? 'selected' : ''; ?>>Sadece Üyeler</option>
                            </select>
                        </div>
                        <div class="pp-form-group">
                            <label class="pp-form-label">Öncelik</label>
                            <input type="number" class="pp-form-input" name="priority" 
                                   value="<?php echo $formData['priority']; ?>" 
                                   min="0" max="100" placeholder="0">
                            <div class="pp-form-hint">Yüksek değer = Önce gösterilir</div>
                        </div>
                    </div>
                </div>
                
                <!-- Durum -->
                <label class="pp-checkbox" style="margin-top: 18px;">
                    <input type="checkbox" name="is_active" value="1" 
                           <?php echo $formData['is_active'] ? 'checked' : ''; ?>>
                    <span class="pp-checkbox-label"><strong>Popup Aktif</strong> - Kullanıcılara gösterilsin</span>
                </label>
                
                <button type="submit" class="pp-submit-btn">
                    <i class="fas fa-<?php echo $editPopup ? 'save' : 'plus'; ?>"></i>
                    <?php echo $editPopup ? 'Popup\'ı Güncelle' : 'Popup Ekle'; ?>
                </button>
            </form>
        </div>
    </div>
    
    <!-- Sağ: Liste -->
    <?php if ($action === 'list' || !empty($popups)): ?>
    <div class="pp-card">
        <div class="pp-card-header">
            <h5 class="pp-card-title">
                <i class="fas fa-list"></i>
                Popup Listesi
            </h5>
            <span class="pp-card-badge"><?php echo $totalPopups; ?> popup</span>
        </div>
        
        <div class="pp-list">
            <?php if (empty($popups)): ?>
            <div class="pp-list-empty">
                <i class="fas fa-window-restore"></i>
                <h4>Henüz popup yok</h4>
                <p>Soldaki formu kullanarak yeni bir popup ekleyin.</p>
            </div>
            <?php else: ?>
                <?php foreach ($popups as $popup): 
                    $isExpired = $popup['end_date'] && strtotime($popup['end_date']) < time();
                    $isScheduled = $popup['start_date'] && strtotime($popup['start_date']) > time();
                    $ctr = $popup['view_count'] > 0 ? round(($popup['click_count'] / $popup['view_count']) * 100, 1) : 0;
                    
                    // Pozisyon isimleri
                    $positions = [
                        'center' => 'Ortada',
                        'bottom-right' => 'Sağ Alt',
                        'bottom-left' => 'Sol Alt',
                        'top-right' => 'Sağ Üst',
                        'top-left' => 'Sol Üst'
                    ];
                    
                    // Boyut isimleri
                    $sizes = [
                        'small' => 'Küçük',
                        'medium' => 'Orta',
                        'large' => 'Büyük'
                    ];
                    
                    // Sıklık isimleri
                    $frequencies = [
                        'always' => 'Her Zaman',
                        'once' => 'Bir Kez',
                        'once_per_session' => 'Oturum Başına',
                        'once_per_day' => 'Günde Bir'
                    ];
                ?>
                <div class="pp-item">
                    <div class="pp-item-header">
                        <div class="pp-item-image">
                            <?php if (!empty($popup['image'])): ?>
                            <img src="<?php echo SITE_URL; ?>/uploads/popups/<?php echo clean($popup['image']); ?>" alt="">
                            <?php else: ?>
                            <i class="fas fa-image"></i>
                            <?php endif; ?>
                        </div>
                        <div class="pp-item-info">
                            <h4 class="pp-item-title">
                                <?php echo clean($popup['title']); ?>
                                <?php if ($popup['priority'] > 0): ?>
                                <span class="priority">Öncelik: <?php echo $popup['priority']; ?></span>
                                <?php endif; ?>
                            </h4>
                            <div class="pp-item-meta">
                                <span><i class="fas fa-arrows-alt"></i> <?php echo $positions[$popup['position']] ?? $popup['position']; ?></span>
                                <span><i class="fas fa-expand"></i> <?php echo $sizes[$popup['size']] ?? $popup['size']; ?></span>
                                <span><i class="fas fa-redo"></i> <?php echo $frequencies[$popup['display_frequency']] ?? $popup['display_frequency']; ?></span>
                                <?php if ($popup['show_delay'] > 0): ?>
                                <span><i class="fas fa-hourglass-half"></i> <?php echo $popup['show_delay']; ?>sn gecikme</span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div class="pp-item-body">
                        <div class="pp-info-box">
                            <h6>Görüntüleme</h6>
                            <p class="views"><?php echo number_format($popup['view_count']); ?></p>
                        </div>
                        <div class="pp-info-box">
                            <h6>Tıklama</h6>
                            <p class="clicks"><?php echo number_format($popup['click_count']); ?></p>
                        </div>
                        <div class="pp-info-box">
                            <h6>CTR</h6>
                            <p>%<?php echo $ctr; ?></p>
                        </div>
                        <div class="pp-info-box">
                            <h6>Hedef</h6>
                            <p><?php echo $popup['target_audience'] === 'all' ? 'Herkes' : ($popup['target_audience'] === 'guests' ? 'Misafir' : 'Üye'); ?></p>
                        </div>
                    </div>
                    
                    <div class="pp-item-footer">
                        <?php if ($isExpired): ?>
                            <span class="pp-status expired"><i class="fas fa-clock"></i> Süresi Doldu</span>
                        <?php elseif ($isScheduled): ?>
                            <span class="pp-status scheduled"><i class="fas fa-hourglass-start"></i> Zamanlanmış</span>
                        <?php elseif ($popup['is_active']): ?>
                            <span class="pp-status active"><i class="fas fa-check"></i> Aktif</span>
                        <?php else: ?>
                            <span class="pp-status inactive"><i class="fas fa-times"></i> Pasif</span>
                        <?php endif; ?>
                        
                        <div class="pp-actions">
                            <button type="button" class="pp-action-btn preview" onclick="previewPopup(<?php echo $popup['id']; ?>)" title="Önizle">
                                <i class="fas fa-eye"></i>
                            </button>
                            <a href="<?php echo SITE_URL; ?>/admin/popuplar.php?action=edit&id=<?php echo $popup['id']; ?>" 
                               class="pp-action-btn" title="Düzenle">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="<?php echo SITE_URL; ?>/admin/popuplar.php?action=toggle&id=<?php echo $popup['id']; ?>" 
                               class="pp-action-btn <?php echo $popup['is_active'] ? 'toggle-on' : 'toggle-off'; ?>" 
                               title="<?php echo $popup['is_active'] ? 'Pasif Yap' : 'Aktif Yap'; ?>">
                                <i class="fas fa-<?php echo $popup['is_active'] ? 'toggle-on' : 'toggle-off'; ?>"></i>
                            </a>
                            <a href="<?php echo SITE_URL; ?>/admin/popuplar.php?action=delete&id=<?php echo $popup['id']; ?>" 
                               class="pp-action-btn delete" 
                               onclick="return confirm('Bu popup\'ı silmek istediğinize emin misiniz?')" title="Sil">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>
</div>

<!-- Önizleme Modal -->
<div class="pp-preview-overlay" id="previewOverlay" onclick="closePreview(event)">
    <div class="pp-preview-container" id="previewContainer">
        <button class="pp-preview-close" onclick="closePreviewBtn()">
            <i class="fas fa-times"></i>
        </button>
        <div id="previewContent"></div>
    </div>
</div>

<script>
// Popup verileri
var popupData = <?php echo json_encode($popups, JSON_UNESCAPED_UNICODE); ?>;

// Renk picker sync
document.getElementById('btnColor').addEventListener('input', function() {
    document.getElementById('btnColorText').value = this.value;
});

// Resim önizleme
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('newImageImg').src = e.target.result;
            document.getElementById('newImagePreview').style.display = 'block';
            
            var uploadArea = document.getElementById('uploadArea');
            if (uploadArea) uploadArea.style.display = 'none';
            
            var imagePreview = document.getElementById('imagePreview');
            if (imagePreview) imagePreview.style.display = 'none';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// Yeni resmi temizle
function clearNewImage() {
    document.getElementById('imageInput').value = '';
    document.getElementById('newImagePreview').style.display = 'none';
    
    var uploadArea = document.getElementById('uploadArea');
    if (uploadArea) uploadArea.style.display = 'block';
    
    var imagePreview = document.getElementById('imagePreview');
    if (imagePreview) imagePreview.style.display = 'block';
}

// Mevcut resmi kaldır
function removeImage() {
    document.getElementById('removeImage').value = '1';
    var imagePreview = document.getElementById('imagePreview');
    if (imagePreview) {
        imagePreview.innerHTML = '<div class="pp-upload-area" onclick="document.getElementById(\'imageInput\').click()">' +
            '<div class="pp-upload-icon"><i class="fas fa-cloud-upload-alt"></i></div>' +
            '<div class="pp-upload-text">Resim yüklemek için tıklayın</div>' +
            '<div class="pp-upload-hint">JPG, PNG, GIF, WEBP - Max 5MB</div>' +
        '</div>';
    }
}

// Popup önizleme
function previewPopup(id) {
    var popup = popupData.find(function(p) { return p.id == id; });
    if (!popup) return;
    
    var html = '';
    
    // Resim
    if (popup.image) {
        html += '<img src="<?php echo SITE_URL; ?>/uploads/popups/' + popup.image + '" class="pp-preview-image" alt="">';
    }
    
    // İçerik
    html += '<div class="pp-preview-content">';
    
    if (popup.title) {
        html += '<h3 class="pp-preview-title">' + escapeHtml(popup.title) + '</h3>';
    }
    
    if (popup.content) {
        html += '<div class="pp-preview-text">' + popup.content + '</div>';
    }
    
    if (popup.button_text && popup.button_url) {
        html += '<a href="' + escapeHtml(popup.button_url) + '" class="pp-preview-button" style="background:' + popup.button_color + '" target="_blank">' + 
            escapeHtml(popup.button_text) + ' <i class="fas fa-arrow-right"></i></a>';
    }
    
    html += '</div>';
    
    document.getElementById('previewContent').innerHTML = html;
    document.getElementById('previewOverlay').classList.add('show');
    document.body.style.overflow = 'hidden';
}

function closePreview(e) {
    if (e.target.id === 'previewOverlay') {
        closePreviewBtn();
    }
}

function closePreviewBtn() {
    document.getElementById('previewOverlay').classList.remove('show');
    document.body.style.overflow = '';
}

// ESC ile kapatma
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closePreviewBtn();
    }
});

// HTML escape
function escapeHtml(text) {
    if (!text) return '';
    var div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Drag & Drop desteği
var uploadArea = document.getElementById('uploadArea');
if (uploadArea) {
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.style.borderColor = 'var(--primary)';
        this.style.background = 'rgba(var(--primary-rgb), 0.1)';
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.style.borderColor = '';
        this.style.background = '';
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.style.borderColor = '';
        this.style.background = '';
        
        var files = e.dataTransfer.files;
        if (files.length > 0) {
            document.getElementById('imageInput').files = files;
            previewImage(document.getElementById('imageInput'));
        }
    });
}
</script>

<?php require_once __DIR__ . '/footer.php'; ?>