Untitled Paste

<?php

session_start();

include 'config.php';

include 'protector.php';

if(!isset($_SESSION["user_id"])){

    header("Location: login.php");

    exit();

}

$childId = isset($_GET['user_id']) ? intval($_GET['user_id']) : $_SESSION['user_id'];

$targetDir = __DIR__ . "/uploads/videos/user_" . $childId;

$webDir = "uploads/videos/user_" . $childId;

if (!is_dir($targetDir)) {

    mkdir($targetDir, 0777, true);

}

// --- READ CONFIGURATION ---

$selected_apps = [];

$upload_condition = 0; // 0=always, 1=charging, 2=wifi

$pending_count = 0;

$is_charging = false;

$last_charging_check = null;

try {

    // Read apps

    $stmt = $conn->prepare("SELECT target_apps FROM feature_video_mode WHERE user_id = :uid LIMIT 1");

    $stmt->execute([':uid' => $childId]);

    $settings = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($settings && !empty($settings['target_apps'])) {

        $selected_apps = explode(',', $settings['target_apps']);

    }

    // Read upload condition

    $stmt2 = $conn->prepare("SELECT upload_condition FROM feature_video_mode WHERE user_id = :uid LIMIT 1");

    $stmt2->execute([':uid' => $childId]);

    $uploadSettings = $stmt2->fetch(PDO::FETCH_ASSOC);

    if ($uploadSettings && isset($uploadSettings['upload_condition'])) {

        $upload_condition = intval($uploadSettings['upload_condition']);

    }

    // Read pending count from device

    $stmt3 = $conn->prepare("SELECT pending_count FROM video_pending_counts WHERE user_id = :uid LIMIT 1");

    $stmt3->execute([':uid' => $childId]);

    $pendingSettings = $stmt3->fetch(PDO::FETCH_ASSOC);

    if ($pendingSettings && isset($pendingSettings['pending_count'])) {

        $pending_count = intval($pendingSettings['pending_count']);

    }

    // Read current charging status from settings

    $stmt4 = $conn->prepare("SELECT is_charging, last_seen FROM settings WHERE user_id = :uid LIMIT 1");

    $stmt4->execute([':uid' => $childId]);

    $deviceSettings = $stmt4->fetch(PDO::FETCH_ASSOC);

    if ($deviceSettings) {

        $is_charging = isset($deviceSettings['is_charging']) ? $deviceSettings['is_charging'] : false;

        $last_charging_check = $deviceSettings['last_seen'] ?? null;

    }

} catch (Exception $e) {}

// --- AJAX SAVE ---

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['ajax_save'])) {

    $apps_array = isset($_POST['apps']) ? (is_array($_POST['apps']) ? $_POST['apps'] : explode(',', $_POST['apps'])) : [];

    $target_apps_string = implode(',', $apps_array);

    $upload_condition_val = isset($_POST['upload_condition']) ? intval($_POST['upload_condition']) : 0;

    try {

        $sql = "INSERT INTO feature_video_mode (user_id, target_apps, upload_condition)

                VALUES (:uid, :apps, :upload_condition)

                ON DUPLICATE KEY UPDATE target_apps = :apps2, upload_condition = :upload_condition2";

        $stmt = $conn->prepare($sql);

        $stmt->execute([

            ':uid' => $childId,

            ':apps' => $target_apps_string,

            ':upload_condition' => $upload_condition_val,

            ':apps2' => $target_apps_string,

            ':upload_condition2' => $upload_condition_val

        ]);

        // Απενεργοποίησε auto screenshots (για να μην τρέχουν παράλληλα)

        $sql2 = "INSERT INTO feature_auto_screenshots (user_id, is_enabled, interval_sec, target_apps)

                 VALUES (:uid, 0, 10, '')

                 ON DUPLICATE KEY UPDATE is_enabled = 0";

        $stmt2 = $conn->prepare($sql2);

        $stmt2->execute([':uid' => $childId]);

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL, "https://kidsprotect.live/send_command.php");

        curl_setopt($ch, CURLOPT_POST, 1);

        curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([

            'user_id' => $childId,

            'command' => 'update_video_mode',

            'enabled' => '1',

            'apps' => $target_apps_string,

            'upload_condition' => $upload_condition_val,

            'disable_screenshots' => '1'

        ]));

        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        curl_setopt($ch, CURLOPT_TIMEOUT, 10);

        curl_exec($ch);

        curl_close($ch);

        header('Content-Type: application/json');

        echo json_encode(['success' => true]);

        exit();

    } catch (Exception $e) {

        header('Content-Type: application/json');

        echo json_encode(['success' => false, 'error' => $e->getMessage()]);

        exit();

    }

}

// --- DELETE SINGLE VIDEO ---

if (isset($_POST['delete_video'])) {

    $videoFile = basename($_POST['delete_video']);

    $filePath = $targetDir . '/' . $videoFile;

    if (file_exists($filePath)) unlink($filePath);

    header("Location: video_mode.php?user_id=" . $childId);

    exit();

}

// --- DELETE ALL VIDEOS ---

if (isset($_POST['delete_all'])) {

    $files = glob($targetDir . '/*.mp4');

    foreach ($files as $file) if (is_file($file)) unlink($file);

    header("Location: video_mode.php?user_id=" . $childId);

    exit();

}

// --- SCAN VIDEOS ---

$videos = [];

if (is_dir($targetDir)) {

    $files = scandir($targetDir);

    foreach ($files as $file) {

        if ($file !== '.' && $file !== '..' && pathinfo($file, PATHINFO_EXTENSION) === 'mp4') {

            $filePath = $targetDir . '/' . $file;

            $appDetected = 'unknown';

            if (stripos($file, 'whatsapp') !== false) $appDetected = 'whatsapp';

            elseif (stripos($file, 'telegram') !== false) $appDetected = 'telegram';

            elseif (stripos($file, 'messenger') !== false) $appDetected = 'messenger';

            elseif (stripos($file, 'viber') !== false) $appDetected = 'viber';

            elseif (stripos($file, 'instagram') !== false) $appDetected = 'instagram';

            elseif (stripos($file, 'facebook') !== false) $appDetected = 'facebook';

            elseif (stripos($file, 'wechat') !== false) $appDetected = 'wechat';

            elseif (stripos($file, 'kakao') !== false || stripos($file, 'kakaotalk') !== false) $appDetected = 'kakaotalk';

            elseif (stripos($file, 'discord') !== false) $appDetected = 'discord';

            elseif (stripos($file, 'signal') !== false) $appDetected = 'signal';

            elseif (stripos($file, 'gmail') !== false) $appDetected = 'gmail';

            elseif (stripos($file, 'chrome') !== false) $appDetected = 'chrome';

            elseif (stripos($file, 'youtube') !== false) $appDetected = 'youtube';

            elseif (stripos($file, 'firefox') !== false) $appDetected = 'firefox';

            $size = filesize($filePath);

            $sizeFormatted = $size > 1048576 ? round($size / 1048576, 1) . ' MB' : round($size / 1024, 1) . ' KB';

            $videos[] = [

                'name' => $file,

                'url' => $webDir . '/' . $file,

                'time' => filemtime($filePath),

                'size' => $sizeFormatted,

                'app' => $appDetected

            ];

        }

    }

    usort($videos, function($a, $b) { return $b['time'] - $a['time']; });

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Video Mode</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>

        body { background: #020617; color: white; padding: 15px 10px; font-family: sans-serif; }

        .config-card { background: #111827; border: 1px solid #1e293b; border-radius: 20px; padding: 20px; max-width: 650px; margin: auto; }

        .app-row { background: #020617; border: 1px solid #1e293b; border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }

        .app-info { display: flex; align-items: center; gap: 8px; }

        .app-info i { font-size: 0.9rem; width: 20px; text-align: center; }

        .app-info span { font-size: 12px; }

        /* Custom Switch - ON = ΠΡΑΣΙΝΟ, OFF = ΚΟΚΚΙΝΟ */

        .custom-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }

        .custom-switch input { opacity: 0; width: 0; height: 0; }

        .custom-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ef4444; transition: 0.3s; border-radius: 22px; }

        .custom-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: 0.3s; border-radius: 50%; }

        input:checked + .custom-slider { background-color: #22c55e; }

        input:checked + .custom-slider:before { transform: translateX(18px); }

        /* Gallery Grid Styles - 3 columns on mobile */

        .gallery-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 12px;

        }

        .gallery-item {

            background: #111827;

            border: 1px solid #1e293b;

            border-radius: 12px;

            overflow: hidden;

            transition: all 0.2s;

            position: relative;

        }

        .thumbnail {

            width: 100%;

            aspect-ratio: 16/9;

            background: #111827;

            position: relative;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            flex-direction: column;

            gap: 8px;

        }

        .thumbnail i {

            font-size: 3rem;

        }

        .thumbnail .play-icon {

            position: absolute;

            font-size: 2rem;

            color: white;

            opacity: 0.8;

            text-shadow: 0 2px 4px rgba(0,0,0,0.5);

        }

        .gallery-item-info {

            padding: 8px;

            background: #1e293b;

        }

        .gallery-app-icon {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 6px;

            margin-bottom: 4px;

        }

        .gallery-app-icon i {

            font-size: 0.9rem;

        }

        .gallery-size {

            font-size: 0.65rem;

            color: #94a3b8;

            text-align: center;

        }

        .gallery-time {

            font-size: 0.6rem;

            color: #64748b;

            text-align: center;

        }

        .gallery-actions {

            display: flex;

            justify-content: center;

            gap: 12px;

            margin-top: 6px;

            padding-top: 6px;

            border-top: 1px solid #334155;

        }

        .gallery-actions button, .gallery-actions a {

            background: none;

            border: none;

            color: #94a3b8;

            font-size: 0.75rem;

            cursor: pointer;

            padding: 4px 6px;

            border-radius: 6px;

            transition: all 0.2s;

            text-decoration: none;

        }

        .gallery-actions button:hover, .gallery-actions a:hover {

            background: #334155;

            color: white;

        }

        .gallery-actions .btn-delete:hover {

            color: #ef4444;

        }

        /* Modal Styles - Better for mobile */

        .video-modal {

            display: none;

            position: fixed;

            z-index: 9999;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0,0,0,0.95);

            animation: fadeIn 0.3s;

        }

        .video-modal-content {

            position: relative;

            width: 100%;

            height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .video-modal-content video {

            width: 100%;

            max-height: 100%;

            background: #000;

        }

        .close-modal {

            position: absolute;

            top: 15px;

            right: 20px;

            color: white;

            font-size: 40px;

            font-weight: bold;

            cursor: pointer;

            z-index: 10000;

            background: rgba(0,0,0,0.5);

            width: 50px;

            height: 50px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

        }

        .close-modal:hover {

            color: #ef4444;

            background: rgba(0,0,0,0.8);

        }

        @keyframes fadeIn {

            from { opacity: 0; }

            to { opacity: 1; }

        }

        .filter-btn { background: #111827; border: 1px solid #1e293b; color: #94a3b8; padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; transition: all 0.2s; }

        .filter-btn:hover, .filter-btn.active { background: #ef4444; border-color: #ef4444; color: white; }

        .toast-msg { position: fixed; bottom: 24px; right: 24px; background: #22c55e; padding: 10px 16px; border-radius: 40px; color: white; display: none; z-index: 9999; font-size: 0.8rem; align-items: center; gap: 8px; }

        .toast-msg.error { background: #ef4444; }

        .apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }

        @media (max-width: 480px) { .apps-grid { grid-template-columns: 1fr; } }

        /* Accordion styles */

        .accordion-header {

            background: #111827;

            border: 1px solid #1e293b;

            border-radius: 12px;

            padding: 12px 15px;

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 0;

            transition: all 0.2s;

        }

        .accordion-header:hover {

            background: #1e293b;

            border-color: #3b82f6;

        }

        .accordion-header .accordion-title {

            font-size: 0.8rem;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            color: #94a3b8;

        }

        .accordion-header i {

            color: #3b82f6;

            transition: transform 0.3s;

        }

        .accordion-content {

            max-height: 0;

            overflow: hidden;

            transition: max-height 0.3s ease-out;

            background: #020617;

            border-radius: 12px;

            margin-top: 0;

        }

        .accordion-content.open {

            max-height: 800px;

            transition: max-height 0.5s ease-in;

        }

        .apps-grid-wrapper {

            padding: 12px 0 0 0;

        }

        /* Upload Accordion styles */

        .upload-accordion-header {

            background: #111827;

            border: 1px solid #1e293b;

            border-radius: 12px;

            padding: 12px 15px;

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 0;

            transition: all 0.2s;

            margin-top: 20px;

        }

        .upload-accordion-header:hover {

            background: #1e293b;

            border-color: #3b82f6;

        }

        .upload-accordion-header .accordion-title {

            font-size: 0.8rem;

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            color: #94a3b8;

        }

        .upload-accordion-header i {

            color: #3b82f6;

            transition: transform 0.3s;

        }

        .upload-accordion-content {

            max-height: 0;

            overflow: hidden;

            transition: max-height 0.3s ease-out;

            background: #020617;

            border-radius: 12px;

            margin-top: 0;

        }

        .upload-accordion-content.open {

            max-height: 400px;

            transition: max-height 0.5s ease-in;

        }

        .upload-grid-wrapper {

            padding: 12px 0 0 0;

        }

        /* Radio group styles */

        .radio-group {

            background: #020617;

            border-radius: 12px;

            padding: 4px;

        }

        .radio-option {

            display: flex;

            align-items: center;

            padding: 8px 12px;

            margin-bottom: 4px;

            border-radius: 10px;

            cursor: pointer;

            transition: all 0.2s;

            background: #111827;

            border: 1px solid #1e293b;

        }

        .radio-option:hover {

            background: #1e293b;

            border-color: #3b82f6;

        }

        .radio-option input {

            width: 16px;

            height: 16px;

            margin-right: 12px;

            accent-color: #3b82f6;

        }

        .radio-option label {

            flex: 1;

            cursor: pointer;

            font-size: 0.8rem;

            font-weight: 500;

            margin: 0;

        }

        .radio-option small {

            font-size: 0.65rem;

            color: #64748b;

        }

        .social-fb { color: #1877f2; }

        .social-msg { color: #0084ff; }

        .social-viber { color: #7360f2; }

        .social-insta { color: #e1306c; }

        .social-wa { color: #25d366; }

        .social-tg { color: #229ed9; }

        .social-wechat { color: #2b9c2b; }

        .social-chrome { color: #db4437; }

        .social-youtube { color: #ff0000; }

        .social-firefox { color: #ff9400; }

        .social-kakao { color: #F9E000; }

        .social-discord { color: #5865F2; }

        .social-signal { color: #3A76F0; }

        .social-gmail { color: #EA4335; }

        /* Pending badge styles */

        .pending-badge {

            background: #f59e0b;

            color: #000;

            font-size: 0.7rem;

            font-weight: bold;

            padding: 2px 8px;

            border-radius: 20px;

            margin-left: 8px;

        }

        .pending-warning {

            background: #ef4444;

            color: white;

            font-size: 0.7rem;

            padding: 4px 10px;

            border-radius: 20px;

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }

        .pending-warning i {

            font-size: 0.7rem;

        }

        /* App logo colors for thumbnails */

        .thumb-wa { color: #25d366; }

        .thumb-tg { color: #229ed9; }

        .thumb-msg { color: #0084ff; }

        .thumb-viber { color: #7360f2; }

        .thumb-insta { color: #e1306c; }

        .thumb-fb { color: #1877f2; }

        .thumb-wechat { color: #2b9c2b; }

        .thumb-kakao { color: #F9E000; text-shadow: 0 0 2px #000; }

        .thumb-discord { color: #5865F2; }

        .thumb-signal { color: #3A76F0; }

        .thumb-gmail { color: #EA4335; }

        .thumb-chrome { color: #db4437; }

        .thumb-yt { color: #ff0000; }

        .thumb-ff { color: #ff9400; }

        /* Charging indicator badge */

        .charging-indicator-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            background: #1e293b;

            padding: 8px 15px;

            border-radius: 40px;

            margin-bottom: 15px;

            width: 100%;

            justify-content: center;

            font-size: 0.8rem;

            border: 1px solid #334155;

        }

        .charging-indicator-badge.charging {

            background: rgba(34, 197, 94, 0.15);

            border-color: #22c55e;

        }

        .charging-indicator-badge.not-charging {

            background: rgba(239, 68, 68, 0.15);

            border-color: #ef4444;

        }

        .charging-indicator-badge i {

            font-size: 1rem;

        }

        /* Force check button style */

        .force-charge-btn {

            background: linear-gradient(135deg, #f59e0b, #d97706);

            border: none;

            border-radius: 40px;

            padding: 8px 16px;

            color: white;

            font-weight: 600;

            font-size: 0.75rem;

            cursor: pointer;

            transition: all 0.2s ease;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            width: 100%;

            justify-content: center;

            margin-top: 12px;

        }

        .force-charge-btn:hover {

            background: linear-gradient(135deg, #d97706, #b45309);

            transform: scale(1.01);

        }

        .force-charge-btn:active {

            transform: scale(0.98);

        }

        .force-charge-btn i {

            font-size: 0.8rem;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="config-card">

        <div class="d-flex justify-content-between align-items-center mb-3">

            <a href="dashboard.php" class="btn btn-sm btn-dark"><i class="fas fa-chevron-left"></i> BACK</a>

            <span class="small text-secondary fw-bold">UID: <?php echo $childId; ?></span>

        </div>

        <h4 class="fw-bold text-center text-danger mb-3" style="font-size: 1.2rem;"><i class="fas fa-video me-2"></i>Video Mode</h4>

        <!-- APPS TO RECORD - Accordion (closed by default) -->

        <div class="mb-3">

            <div class="accordion-header" onclick="toggleAccordion()">

                <span class="accordion-title"><i class="fas fa-mobile-alt me-2"></i>APPS TO RECORD</span>

                <i id="accordionIcon" class="fas fa-chevron-down"></i>

            </div>

            <div id="accordionContent" class="accordion-content">

                <div class="apps-grid-wrapper">

                    <div class="apps-grid">

                        <!-- WhatsApp -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-whatsapp social-wa"></i><span>WhatsApp</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="whatsapp" <?php echo in_array('whatsapp', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Telegram -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-telegram social-tg"></i><span>Telegram</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="telegram" <?php echo in_array('telegram', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Messenger -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-facebook-messenger social-msg"></i><span>Messenger</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="messenger" <?php echo in_array('messenger', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Viber -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-viber social-viber"></i><span>Viber</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="viber" <?php echo in_array('viber', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Instagram -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-instagram social-insta"></i><span>Instagram</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="instagram" <?php echo in_array('instagram', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Facebook -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-facebook social-fb"></i><span>Facebook</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="facebook" <?php echo in_array('facebook', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- WeChat -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-weixin social-wechat"></i><span>WeChat</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="wechat" <?php echo in_array('wechat', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- KakaoTalk -->

                        <div class="app-row"><div class="app-info"><i class="fas fa-comment social-kakao"></i><span>KakaoTalk</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="kakaotalk" <?php echo in_array('kakaotalk', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Discord -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-discord social-discord"></i><span>Discord</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="discord" <?php echo in_array('discord', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Signal -->

                        <div class="app-row"><div class="app-info"><i class="fas fa-lock social-signal"></i><span>Signal</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="signal" <?php echo in_array('signal', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Gmail -->

                        <div class="app-row"><div class="app-info"><i class="fas fa-envelope social-gmail"></i><span>Gmail</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="gmail" <?php echo in_array('gmail', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Chrome -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-chrome social-chrome"></i><span>Chrome</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="chrome" <?php echo in_array('chrome', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- YouTube -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-youtube social-youtube"></i><span>YouTube</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="youtube" <?php echo in_array('youtube', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                        <!-- Firefox -->

                        <div class="app-row"><div class="app-info"><i class="fab fa-firefox-browser social-firefox"></i><span>Firefox</span></div>

                            <label class="custom-switch"><input type="checkbox" class="app-toggle" value="firefox" <?php echo in_array('firefox', $selected_apps) ? 'checked' : ''; ?>><span class="custom-slider"></span></label></div>

                    </div>

                </div>

            </div>

        </div>

        <!-- UPLOAD SETTINGS - Accordion (closed by default) -->

        <div class="upload-accordion-header" onclick="toggleUploadAccordion()">

            <span class="accordion-title"><i class="fas fa-battery-full me-2"></i>UPLOAD SETTINGS</span>

            <i id="uploadAccordionIcon" class="fas fa-chevron-down"></i>

        </div>

        <div id="uploadAccordionContent" class="upload-accordion-content">

            <div class="upload-grid-wrapper">

                <!-- ========== NEW: CHARGING INDICATOR ========== -->

                <?php

                $chargingIcon = $is_charging ? 'fa-battery-full' : 'fa-battery-quarter';

                $chargingText = $is_charging ? 'CHARGING' : 'NOT CHARGING';

                $chargingClass = $is_charging ? 'charging' : 'not-charging';

                $chargingColor = $is_charging ? '#22c55e' : '#ef4444';

                ?>

                <div class="charging-indicator-badge <?php echo $chargingClass; ?>">

                    <i class="fas <?php echo $chargingIcon; ?>" style="color: <?php echo $chargingColor; ?>;"></i>

                    <span>CURRENT STATUS: <strong id="chargingStatusDisplay" style="color: <?php echo $chargingColor; ?>;"><?php echo $chargingText; ?></strong></span>

                    <?php if ($last_charging_check): ?>

                    <small style="color: #64748b; font-size: 0.6rem;">(last: <?php echo date("H:i:s", strtotime($last_charging_check)); ?>)</small>

                    <?php endif; ?>

                </div>

                <!-- ========== END CHARGING INDICATOR ========== -->

                <div class="radio-group">

                    <div class="radio-option" onclick="document.getElementById('uploadAlways').click()">

                        <input type="radio" name="upload_condition" id="uploadAlways" value="0" <?php echo $upload_condition == 0 ? 'checked' : ''; ?>>

                        <label>Always (default)</label>

                        <small>Upload videos immediately</small>

                    </div>

                    <div class="radio-option" onclick="document.getElementById('uploadCharging').click()">

                        <input type="radio" name="upload_condition" id="uploadCharging" value="1" <?php echo $upload_condition == 1 ? 'checked' : ''; ?>>

                        <label><i class="fas fa-plug me-1"></i> Upload only when charging</label>

                        <small>Saves battery - videos upload when device is plugged in</small>

                    </div>

                    <div class="radio-option" onclick="document.getElementById('uploadWifi').click()">

                        <input type="radio" name="upload_condition" id="uploadWifi" value="2" <?php echo $upload_condition == 2 ? 'checked' : ''; ?>>

                        <label><i class="fas fa-wifi me-1"></i> Upload only on WiFi</label>

                        <small>Use WiFi only, no mobile data</small>

                    </div>

                </div>

                <!-- ========== NEW: FORCE CHECK CHARGING BUTTON ========== -->

                <button id="forceCheckChargingBtn" class="force-charge-btn">

                    <i class="fas fa-bolt"></i> FORCE CHECK CHARGING STATUS

                </button>

                <!-- ========== END NEW BUTTON ========== -->

            </div>

        </div>

    </div>

    <!-- Videos Section -->

    <div class="config-card mt-3" style="max-width: 800px;">

        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">

            <div>

                <i class="fas fa-video me-2 text-danger"></i>

                <span class="fw-bold">RECORDED VIDEOS</span>

                <span class="badge bg-secondary ms-2" id="videoCount"><?php echo count($videos); ?></span>

                <?php

                // Display pending count if there are pending videos and upload_condition is not "Always"

                if ($pending_count > 0 && $upload_condition != 0) {

                    echo '<span class="pending-warning ms-2"><i class="fas fa-hourglass-half"></i> ' . $pending_count . ' pending video' . ($pending_count > 1 ? 's' : '') . ' waiting for ';

                    if ($upload_condition == 1) echo 'Charging';

                    elseif ($upload_condition == 2) echo 'WiFi';

                    echo '</span>';

                } elseif ($upload_condition != 0) {

                    echo '<span class="pending-warning ms-2"><i class="fas fa-hourglass-half"></i> Pending: Waiting for ';

                    if ($upload_condition == 1) echo 'Charging';

                    elseif ($upload_condition == 2) echo 'WiFi';

                    echo '</span>';

                }

                ?>

            </div>

            <div class="d-flex gap-1 flex-wrap">

                <button class="filter-btn active" data-filter="all">All</button>

                <button class="filter-btn" data-filter="whatsapp"><i class="fab fa-whatsapp social-wa"></i></button>

                <button class="filter-btn" data-filter="telegram"><i class="fab fa-telegram social-tg"></i></button>

                <button class="filter-btn" data-filter="messenger"><i class="fab fa-facebook-messenger social-msg"></i></button>

                <button class="filter-btn" data-filter="viber"><i class="fab fa-viber social-viber"></i></button>

                <button class="filter-btn" data-filter="instagram"><i class="fab fa-instagram social-insta"></i></button>

                <button class="filter-btn" data-filter="facebook"><i class="fab fa-facebook social-fb"></i></button>

                <button class="filter-btn" data-filter="wechat"><i class="fab fa-weixin social-wechat"></i></button>

                <button class="filter-btn" data-filter="kakaotalk"><i class="fas fa-comment social-kakao"></i></button>

                <button class="filter-btn" data-filter="discord"><i class="fab fa-discord social-discord"></i></button>

                <button class="filter-btn" data-filter="signal"><i class="fas fa-lock social-signal"></i></button>

                <button class="filter-btn" data-filter="gmail"><i class="fas fa-envelope social-gmail"></i></button>

                <button class="filter-btn" data-filter="chrome"><i class="fab fa-chrome social-chrome"></i></button>

                <button class="filter-btn" data-filter="youtube"><i class="fab fa-youtube social-youtube"></i></button>

                <button class="filter-btn" data-filter="firefox"><i class="fab fa-firefox-browser social-firefox"></i></button>

                <button id="refreshBtn" class="filter-btn" style="background: #3b82f6; border-color: #3b82f6;"><i class="fas fa-sync-alt"></i></button>

            </div>

            <?php if (count($videos) > 0): ?>

            <form method="POST" onsubmit="return confirm('Delete ALL videos?');">

                <input type="hidden" name="delete_all" value="1">

                <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:0.7rem;"><i class="fas fa-trash-alt me-1"></i>DELETE ALL</button>

            </form>

            <?php endif; ?>

        </div>

        <div id="videosContainer" class="gallery-grid">

            <?php if (count($videos) === 0): ?>

                <div class="text-center p-4 bg-dark text-muted rounded-3" id="emptyVideosMsg" style="grid-column: 1/-1;">

                    <i class="fas fa-film fa-2x mb-2"></i>

                    <p class="mb-0 small">No videos recorded yet.</p>

                </div>

            <?php else: ?>

                <?php foreach ($videos as $video): ?>

                <div class="gallery-item" data-app="<?php echo $video['app']; ?>" data-video-url="serve_video.php?user_id=<?php echo $childId; ?>&file=<?php echo urlencode($video['name']); ?>" data-video-name="<?php echo htmlspecialchars($video['name']); ?>">

                    <div class="thumbnail" onclick="openVideoModal(this.parentElement.getAttribute('data-video-url'))">

                        <?php

                        // Get the appropriate icon and color for the app

                        $thumbIcon = 'fa-video';

                        $thumbColor = '#94a3b8';

                        if ($video['app'] == 'whatsapp') {

                            $thumbIcon = 'fab fa-whatsapp';

                            $thumbColor = '#25d366';

                        } elseif ($video['app'] == 'telegram') {

                            $thumbIcon = 'fab fa-telegram';

                            $thumbColor = '#229ed9';

                        } elseif ($video['app'] == 'messenger') {

                            $thumbIcon = 'fab fa-facebook-messenger';

                            $thumbColor = '#0084ff';

                        } elseif ($video['app'] == 'viber') {

                            $thumbIcon = 'fab fa-viber';

                            $thumbColor = '#7360f2';

                        } elseif ($video['app'] == 'instagram') {

                            $thumbIcon = 'fab fa-instagram';

                            $thumbColor = '#e1306c';

                        } elseif ($video['app'] == 'facebook') {

                            $thumbIcon = 'fab fa-facebook';

                            $thumbColor = '#1877f2';

                        } elseif ($video['app'] == 'wechat') {

                            $thumbIcon = 'fab fa-weixin';

                            $thumbColor = '#2b9c2b';

                        } elseif ($video['app'] == 'kakaotalk') {

                            $thumbIcon = 'fas fa-comment';

                            $thumbColor = '#F9E000';

                        } elseif ($video['app'] == 'discord') {

                            $thumbIcon = 'fab fa-discord';

                            $thumbColor = '#5865F2';

                        } elseif ($video['app'] == 'signal') {

                            $thumbIcon = 'fas fa-lock';

                            $thumbColor = '#3A76F0';

                        } elseif ($video['app'] == 'gmail') {

                            $thumbIcon = 'fas fa-envelope';

                            $thumbColor = '#EA4335';

                        } elseif ($video['app'] == 'chrome') {

                            $thumbIcon = 'fab fa-chrome';

                            $thumbColor = '#db4437';

                        } elseif ($video['app'] == 'youtube') {

                            $thumbIcon = 'fab fa-youtube';

                            $thumbColor = '#ff0000';

                        } elseif ($video['app'] == 'firefox') {

                            $thumbIcon = 'fab fa-firefox-browser';

                            $thumbColor = '#ff9400';

                        } else {

                            $thumbIcon = 'fas fa-video';

                            $thumbColor = '#94a3b8';

                        }

                        ?>

                        <i class="<?php echo $thumbIcon; ?>" style="font-size: 3rem; color: <?php echo $thumbColor; ?>; text-shadow: 0 2px 4px rgba(0,0,0,0.3);"></i>

                        <i class="fas fa-play-circle play-icon"></i>

                    </div>

                    <div class="gallery-item-info">

                        <div class="gallery-app-icon">

                            <?php

                            $icon = 'fa-mobile-alt';

                            if ($video['app'] == 'whatsapp') $icon = 'fab fa-whatsapp social-wa';

                            elseif ($video['app'] == 'telegram') $icon = 'fab fa-telegram social-tg';

                            elseif ($video['app'] == 'messenger') $icon = 'fab fa-facebook-messenger social-msg';

                            elseif ($video['app'] == 'viber') $icon = 'fab fa-viber social-viber';

                            elseif ($video['app'] == 'instagram') $icon = 'fab fa-instagram social-insta';

                            elseif ($video['app'] == 'facebook') $icon = 'fab fa-facebook social-fb';

                            elseif ($video['app'] == 'wechat') $icon = 'fab fa-weixin social-wechat';

                            elseif ($video['app'] == 'kakaotalk') $icon = 'fas fa-comment social-kakao';

                            elseif ($video['app'] == 'discord') $icon = 'fab fa-discord social-discord';

                            elseif ($video['app'] == 'signal') $icon = 'fas fa-lock social-signal';

                            elseif ($video['app'] == 'gmail') $icon = 'fas fa-envelope social-gmail';

                            elseif ($video['app'] == 'chrome') $icon = 'fab fa-chrome social-chrome';

                            elseif ($video['app'] == 'youtube') $icon = 'fab fa-youtube social-youtube';

                            elseif ($video['app'] == 'firefox') $icon = 'fab fa-firefox-browser social-firefox';

                            ?>

                            <i class="<?php echo $icon; ?>"></i>

                        </div>

                        <div class="gallery-size"><?php echo $video['size']; ?></div>

                        <div class="gallery-time"><?php echo date("d/m H:i", $video['time']); ?></div>

                        <div class="gallery-actions">

                            <form method="POST" style="display:inline;" onsubmit="return confirm('Delete this video?');">

                                <input type="hidden" name="delete_video" value="<?php echo htmlspecialchars($video['name']); ?>">

                                <button type="submit" class="btn-delete"><i class="fas fa-trash-alt"></i> Delete</button>

                            </form>

                            <a href="<?php echo $video['url']; ?>" download="<?php echo htmlspecialchars($video['name']); ?>"><i class="fas fa-download"></i> Download</a>

                        </div>

                    </div>

                </div>

                <?php endforeach; ?>

            <?php endif; ?>

        </div>

        <div id="noVideosMsg" class="text-center p-4 bg-dark text-muted rounded-3 d-none">

            <i class="fas fa-folder-open fa-2x mb-2"></i>

            <p class="mb-0 small">No videos found for this filter</p>

        </div>

    </div>

</div>

<!-- Modal for video playback -->

<div id="videoModal" class="video-modal">

    <div class="video-modal-content">

        <span class="close-modal">&times;</span>

        <video id="modalVideo" controls autoplay>

            <source id="modalVideoSource" src="" type="video/mp4">

            Your browser does not support the video tag.

        </video>

    </div>

</div>

<div id="toastMsg" class="toast-msg"><i class="fas fa-check-circle"></i><span id="toastText">Settings saved</span></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

var childId = <?php echo $childId; ?>;

function showToast(message, isError) {

    var $toast = $('#toastMsg');

    $('#toastText').text(message);

    if (isError) $toast.addClass('error');

    else $toast.removeClass('error');

    $toast.css('display', 'flex');

    setTimeout(function() { $toast.fadeOut(300, function() { $(this).css('display', 'none'); }); }, 3000);

}

function updateChargingDisplay(isCharging, lastSeen) {

    var $display = $('#chargingStatusDisplay');

    var $badge = $('.charging-indicator-badge');

    var $icon = $badge.find('i');

    if (isCharging) {

        $display.text('CHARGING').css('color', '#22c55e');

        $badge.removeClass('not-charging').addClass('charging');

        $icon.removeClass('fa-battery-quarter').addClass('fa-battery-full').css('color', '#22c55e');

    } else {

        $display.text('NOT CHARGING').css('color', '#ef4444');

        $badge.removeClass('charging').addClass('not-charging');

        $icon.removeClass('fa-battery-full').addClass('fa-battery-quarter').css('color', '#ef4444');

    }

    if (lastSeen) {

        $badge.find('small').text('(last: ' + lastSeen + ')');

    }

}

function fetchChargingStatus() {

    $.get('get_charging_status.php?user_id=' + childId + '&t=' + new Date().getTime(), function(data) {

        var isCharging = data.trim() === "1";

        var now = new Date();

        var timeStr = now.getHours().toString().padStart(2,'0') + ':' +

                      now.getMinutes().toString().padStart(2,'0') + ':' +

                      now.getSeconds().toString().padStart(2,'0');

        updateChargingDisplay(isCharging, timeStr);

    });

}

function saveSettings() {

    var selectedApps = [];

    var uploadCondition = $('input[name="upload_condition"]:checked').val();

    $('.app-toggle').each(function() {

        if ($(this).is(':checked')) selectedApps.push($(this).val());

    });

    $.ajax({

        url: window.location.href,

        method: 'POST',

        data: {

            ajax_save: 1,

            apps: selectedApps.join(','),

            upload_condition: uploadCondition

        },

        dataType: 'json',

        success: function(response) {

            if (response.success) {

                showToast('✓ Settings saved', false);

                // Reload to update pending indicator

                setTimeout(function() { location.reload(); }, 500);

            } else {

                showToast('✗ Error: ' + (response.error || 'Unknown error'), true);

            }

        },

        error: function() { showToast('✗ Error saving settings', true); }

    });

}

// ========== NEW: Force check charging status ==========

function forceCheckCharging() {

    var $btn = $('#forceCheckChargingBtn');

    var originalHtml = $btn.html();

    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> CHECKING...');

    $.post('send_command.php', {

        user_id: childId,

        command: 'get_status_now'

    }, function() {

        showToast('✓ Charging status refreshed!', false);

        // Wait a moment for the device to update the database

        setTimeout(function() {

            fetchChargingStatus();

            $btn.prop('disabled', false).html(originalHtml);

            showToast('✓ Status updated to server', false);

        }, 2000);

    }).fail(function() {

        showToast('✗ Failed to refresh charging status', true);

        $btn.prop('disabled', false).html(originalHtml);

    });

}

// ========== END NEW ==========

$('.app-toggle').on('change', function() { saveSettings(); });

$('input[name="upload_condition"]').on('change', function() { saveSettings(); });

$('#forceCheckChargingBtn').on('click', function() { forceCheckCharging(); });

function toggleAccordion() {

    var content = document.getElementById('accordionContent');

    var icon = document.getElementById('accordionIcon');

    content.classList.toggle('open');

    if (content.classList.contains('open')) {

        icon.classList.remove('fa-chevron-down');

        icon.classList.add('fa-chevron-up');

    } else {

        icon.classList.remove('fa-chevron-up');

        icon.classList.add('fa-chevron-down');

    }

}

function toggleUploadAccordion() {

    var content = document.getElementById('uploadAccordionContent');

    var icon = document.getElementById('uploadAccordionIcon');

    content.classList.toggle('open');

    if (content.classList.contains('open')) {

        icon.classList.remove('fa-chevron-down');

        icon.classList.add('fa-chevron-up');

    } else {

        icon.classList.remove('fa-chevron-up');

        icon.classList.add('fa-chevron-down');

    }

}

// Modal functionality

var modal = document.getElementById('videoModal');

var modalVideo = document.getElementById('modalVideo');

var modalVideoSource = document.getElementById('modalVideoSource');

var closeModal = document.getElementsByClassName('close-modal')[0];

function openVideoModal(videoUrl) {

    modalVideoSource.src = videoUrl;

    modalVideo.load();

    modal.style.display = 'flex';

}

closeModal.onclick = function() {

    modal.style.display = 'none';

    modalVideo.pause();

    modalVideoSource.src = '';

}

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = 'none';

        modalVideo.pause();

        modalVideoSource.src = '';

    }

}

// Gallery filter

$('.filter-btn').on('click', function() {

    $('.filter-btn').removeClass('active');

    $(this).addClass('active');

    var filter = $(this).data('filter');

    var visibleCount = 0;

    $('.gallery-item').each(function() {

        if (filter === 'all' || $(this).data('app') === filter) {

            $(this).show();

            visibleCount++;

        } else {

            $(this).hide();

        }

    });

    if (visibleCount === 0) {

        $('#noVideosMsg').removeClass('d-none');

        $('#videosContainer').addClass('d-none');

    } else {

        $('#noVideosMsg').addClass('d-none');

        $('#videosContainer').removeClass('d-none');

    }

});

function refreshVideos(silent = false) {

    $.ajax({

        url: window.location.href + '?t=' + new Date().getTime(),

        type: 'GET',

        cache: false,

        success: function(data) {

            var newVideos = $(data).find('#videosContainer').html();

            var newCount = $(data).find('#videoCount').html();

            $('#videosContainer').html(newVideos);

            $('#videoCount').text(newCount);

            var activeFilter = $('.filter-btn.active').data('filter');

            if (activeFilter && activeFilter !== 'all') {

                $('.gallery-item').each(function() {

                    if ($(this).data('app') === activeFilter) {

                        $(this).show();

                    } else {

                        $(this).hide();

                    }

                });

            }

            if ($('.gallery-item').length === 0) {

                if ($('#emptyVideosMsg').length === 0) {

                    $('#videosContainer').html('<div class="text-center p-4 bg-dark text-muted rounded-3" id="emptyVideosMsg" style="grid-column: 1/-1;"><i class="fas fa-film fa-2x mb-2"></i><p class="mb-0 small">No videos recorded yet.</p></div>');

                }

            } else {

                $('#emptyVideosMsg').remove();

            }

            if (!silent) {

                showToast('✓ Videos refreshed', false);

            }

        }

    });

}

$('#refreshBtn').on('click', function() {

    refreshVideos(false);

});

// Auto-refresh every 10 seconds (silent - no toast)

setInterval(function() {

    refreshVideos(true);

    fetchChargingStatus();

}, 10000);

// Initial fetch of charging status

fetchChargingStatus();

</script>

</body>

</html>