<?php
session_start();
require_once '../config/database.php';
require_once '../includes/site_settings.php';
require_once '../includes/sidebar_layout.php';

// Check if user is logged in and has permission
if (!isset($_SESSION['user_id']) || !in_array($_SESSION['user_role'], ['admin', 'teacher'])) {
    header('Location: ../login.php');
    exit();
}

// Get system name for branding
$system_name = get_system_name($pdo);

// Get user info for sidebar
$user_name = isset($_SESSION['username']) ? $_SESSION['username'] : 'User';
if (isset($_SESSION['user_id'])) {
    if ($_SESSION['user_role'] == 'teacher') {
        $stmt = $pdo->prepare("SELECT CONCAT(first_name, ' ', last_name) as name FROM teachers WHERE user_id = ?");
        $stmt->execute([$_SESSION['user_id']]);
        $result = $stmt->fetch();
        if ($result) {
            $user_name = $result['name'];
        }
    }
}

$current_page = basename($_SERVER['PHP_SELF']);
$sidebar_html = renderSidebar($current_page, $_SESSION['user_role'], $user_name);
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ক্যামেরা সহায়তা - <?php echo htmlspecialchars($system_name); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet">
    <link href="../assets/css/sidebar.css" rel="stylesheet">
    <style>
        .troubleshooting-card {
            transition: transform 0.2s ease-in-out;
        }
        
        .troubleshooting-card:hover {
            transform: translateY(-5px);
        }
        
        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #007bff;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .faq-item {
            border-left: 4px solid #007bff;
            margin-bottom: 15px;
            padding-left: 15px;
        }
    </style>
</head>
<body>
    <div class="sidebar-container">
        <?php echo $sidebar_html; ?>
        
        <div class="main-content">
            <!-- Content Header -->
            <div class="content-header">
                <h1 class="content-title">
                    <i class="fas fa-video me-2"></i>
                    ক্যামেরা সহায়তা ও সমস্যা সমাধান
                </h1>
                <p class="content-breadcrumb">
                    <i class="fas fa-home me-1"></i>
                    হোম / ক্যামেরা সহায়তা
                    <span class="ms-3 text-muted">
                        <i class="fas fa-clock me-1"></i>
                        <?php echo date('d F Y, l'); ?>
                    </span>
                </p>
            </div>
            
            <!-- Floating Sidebar Toggle Button -->
            <button class="sidebar-toggle-float" onclick="toggleSidebar()" title="সাইডবার টগল করুন">
                <i class="fas fa-bars"></i>
            </button>
            
            <!-- Content Body -->
            <div class="content-body">
                <div class="container-fluid mt-4">
                    <!-- Welcome Message -->
                    <div class="alert alert-primary alert-dismissible fade show" role="alert">
                        <h4 class="alert-heading"><i class="fas fa-info-circle me-2"></i> ক্যামেরা সহায়তা গাইড</h4>
                        <p>এই পৃষ্ঠায় আপনি ক্যামেরা সংক্রান্ত সমস্যা সমাধান এবং নির্দেশাবলী পাবেন।</p>
                        <hr>
                        <p class="mb-0">নিরাপত্তার কারণে, ক্যামেরা ব্যবহারের জন্য আপনাকে <strong>localhost</strong> বা <strong>HTTPS</strong> এ থাকতে হবে।</p>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    
                    <!-- Quick Troubleshooting Guide -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-bolt me-2"></i> দ্রুত সমস্যা সমাধান</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="troubleshooting-card p-3 mb-3 bg-light rounded">
                                                <h6><i class="fas fa-shield-alt me-2 text-danger"></i> ক্যামেরা অনুমতি সমস্যা</h6>
                                                <p class="mb-1">সমস্যা: "ক্যামেরা ব্যবহারের অনুমতি দিন"</p>
                                                <p class="mb-0"><strong>সমাধান:</strong> ঠিকানা বারে 🔒 আইকনে ক্লিক করুন এবং ক্যামেরা ব্যবহারের অনুমতি দিন।</p>
                                            </div>
                                            
                                            <div class="troubleshooting-card p-3 mb-3 bg-light rounded">
                                                <h6><i class="fas fa-plug me-2 text-warning"></i> ক্যামেরা পাওয়া যাচ্ছে না</h6>
                                                <p class="mb-1">সমস্যা: "ক্যামেরা পাওয়া যায়নি"</p>
                                                <p class="mb-0"><strong>সমাধান:</strong> ক্যামেরা সংযুক্ত আছে কিনা পরীক্ষা করুন এবং অন্য কোনো প্রোগ্রাম ব্যবহার করছে কিনা দেখুন।</p>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="troubleshooting-card p-3 mb-3 bg-light rounded">
                                                <h6><i class="fas fa-network-wired me-2 text-info"></i> সুরক্ষা সমস্যা</h6>
                                                <p class="mb-1">সমস্যা: "HTTPS এবং localhost ছাড়া ক্যামেরা ব্যবহার করা যাবে না"</p>
                                                <p class="mb-0"><strong>সমাধান:</strong> লোকালহোস্ট বা HTTPS এ ওয়েবসাইট চালান।</p>
                                            </div>
                                            
                                            <div class="troubleshooting-card p-3 mb-3 bg-light rounded">
                                                <h6><i class="fas fa-sync-alt me-2 text-success"></i> পুনরায় চেষ্টা করুন</h6>
                                                <p class="mb-1">সমস্যা: ক্যামেরা কাজ করছে না</p>
                                                <p class="mb-0"><strong>সমাধান:</strong> ব্রাউজার রিফ্রেশ করুন এবং আবার চেষ্টা করুন।</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step-by-step Instructions -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-list-ol me-2"></i> ক্যামেরা ব্যবহারের ধাপে ধাপে নির্দেশাবলী</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        <h6><i class="fas fa-user-check me-2 text-primary"></i> শিক্ষক নির্বাচন করুন</h6>
                                        <p>প্রথমে ড্রপডাউন থেকে শিক্ষক নির্বাচন করুন।</p>
                                    </div>
                                    
                                    <div class="mb-4">
                                        <h6><i class="fas fa-sliders-h me-2 text-primary"></i> মোড নির্বাচন করুন</h6>
                                        <div class="ps-4">
                                            <p><span class="step-number">১</span> <strong>ফটো রেজিস্ট্রেশন মোড:</strong> শিক্ষকের ছবি রেজিস্টার করতে ব্যবহার করুন</p>
                                            <p><span class="step-number">২</span> <strong>অটো উপস্থিতি মোড:</strong> ক্যামেরার মাধ্যমে স্বয়ংক্রিয় উপস্থিতি চিহ্নিত করতে ব্যবহার করুন</p>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-4">
                                        <h6><i class="fas fa-video me-2 text-primary"></i> ক্যামেরা চালু করুন</h6>
                                        <div class="ps-4">
                                            <p><span class="step-number">৩</span> ক্যামেরা চালু করুন বাটনে ক্লিক করুন</p>
                                            <p><span class="step-number">৪</span> ব্রাউজার থেকে ক্যামেরা ব্যবহারের অনুমতি দিন</p>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-4">
                                        <h6><i class="fas fa-check-circle me-2 text-primary"></i> উপস্থিতি চিহ্নিত করুন</h6>
                                        <div class="ps-4">
                                            <p><span class="step-number">৫</span> ক্যামেরার সামনে দাঁড়ান (অটো উপস্থিতি মোডে)</p>
                                            <p><span class="step-number">৬</span> উপস্থিতি স্বয়ংক্রিয়ভাবে চিহ্নিত হবে বা ম্যানুয়ালি চিহ্নিত করুন</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Browser Specific Instructions -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="fab fa-chrome me-2"></i> ব্রাউজার অনুযায়ী নির্দেশাবলী</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="border p-3 rounded mb-3">
                                                <h6><i class="fab fa-chrome me-2 text-danger"></i> Google Chrome</h6>
                                                <ul class="mb-0">
                                                    <li>ঠিকানা বারে 🔒 আইকনে ক্লিক করুন</li>
                                                    <li>"ক্যামেরা" এর জন্য "Allow" নির্বাচন করুন</li>
                                                    <li>পৃষ্ঠা রিফ্রেশ করুন</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-4">
                                            <div class="border p-3 rounded mb-3">
                                                <h6><i class="fab fa-firefox me-2 text-orange"></i> Mozilla Firefox</h6>
                                                <ul class="mb-0">
                                                    <li>ঠিকানা বারে ক্যামেরা আইকনে ক্লিক করুন</li>
                                                    <li>"Allow" নির্বাচন করুন</li>
                                                    <li>পৃষ্ঠা রিফ্রেশ করুন</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-4">
                                            <div class="border p-3 rounded mb-3">
                                                <h6><i class="fab fa-edge me-2 text-blue"></i> Microsoft Edge</h6>
                                                <ul class="mb-0">
                                                    <li>ঠিকানা বারে 🔒 আইকনে ক্লিক করুন</li>
                                                    <li>"ক্যামেরা" এর জন্য "Allow" নির্বাচন করুন</li>
                                                    <li>পৃষ্ঠা রিফ্রেশ করুন</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Section -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="mb-0"><i class="fas fa-question-circle me-2"></i> প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী</h5>
                                </div>
                                <div class="card-body">
                                    <div class="faq-item">
                                        <h6>কেন ক্যামেরা কাজ করছে না?</h6>
                                        <p>ক্যামেরা কাজ না করার সম্ভাব্য কারণগুলো হলো: অনুমতি দেওয়া হয়নি, ক্যামেরা অন্য প্রোগ্রাম ব্যবহার করছে, সাইটটি HTTPS বা localhost এ নেই।</p>
                                    </div>
                                    
                                    <div class="faq-item">
                                        <h6>কেন শুধুমাত্র localhost বা HTTPS এ কাজ করে?</h6>
                                        <p>ব্রাউজার নিরাপত্তার কারণে, ক্যামেরা ব্যবহারের জন্য সাইটটি সুরক্ষিত হতে হবে। তাই শুধুমাত্র localhost বা HTTPS এ ক্যামেরা ব্যবহার করা যায়।</p>
                                    </div>
                                    
                                    <div class="faq-item">
                                        <h6>কিভাবে অটো উপস্থিতি কাজ করে?</h6>
                                        <p>ক্যামেরা চালু করার পর, সিস্টেম মুখ শনাক্তকরণ করে এবং উপস্থিতি চিহ্নিত করে। এজন্য ক্যামেরার সামনে দাঁড়ান।</p>
                                    </div>
                                    
                                    <div class="faq-item">
                                        <h6>কোন ব্রাউজারে কাজ করে?</h6>
                                        <p>Chrome, Firefox, Edge সহ সব আধুনিক ব্রাউজারে কাজ করে। তবে সবচেয়ে ভালো অভিজ্ঞতা Chrome এ পাবেন।</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../assets/js/script.js"></script>
    <script>
        // Add toggle sidebar functionality
        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            sidebar.classList.toggle('active');
        }
    </script>
</body>
</html>