<?php 
// Advanced Configuration
ini_set('display_errors', 1); error_reporting(E_ALL);
date_default_timezone_set('Asia/Dhaka');
require_once 'db_connect.php';

include 'includes/user_header.php'; 
if(file_exists('includes/sidebar.php')) { include 'includes/sidebar.php'; } 

$student_id = $_SESSION['student_id'] ?? null;
if (!$student_id) { echo "<script>window.location.href='login.php';</script>"; exit; }

// ==========================================
// ⚙️ FETCH DYNAMIC NOTICES
// ==========================================
// স্টুডেন্টের কোর্সের নোটিশ এবং জেনারেল নোটিশ (course_id = 0) একসাথে আনা
try {
    $stmt = $pdo->prepare("
        SELECT * FROM notices 
        WHERE course_id = 0 
        OR course_id IN (SELECT course_id FROM enrollments WHERE student_id = ? AND status = 'active')
        ORDER BY is_urgent DESC, id DESC
    ");
    $stmt->execute([$student_id]);
    $notices = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) { $notices = []; }
?>

<style>
    :root { --primary: #064e3b; --accent: #d4af37; --bg: #f8fafc; }
    .main-content { background-color: var(--bg); min-height: 100vh; padding-bottom: 50px; }
    .fade-up { animation: fadeInUp 0.5s ease-out forwards; }
    @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

    /* Header Styling */
    .notice-header { background: #fff; border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); margin-bottom: 30px; border-left: 6px solid var(--primary); }
    
    /* Search Bar */
    .search-box { position: relative; max-width: 400px; }
    .search-box input { border-radius: 15px; padding: 12px 20px 12px 45px; border: 2px solid #f1f5f9; background: #fff; font-weight: 600; }
    .search-box i { position: absolute; left: 18px; top: 15px; color: #94a3b8; }

    /* Notice Card UI */
    .notice-card { background: #fff; border-radius: 20px; border: 1px solid #e2e8f0; padding: 25px; transition: all 0.3s ease; margin-bottom: 20px; position: relative; overflow: hidden; height: 100%; }
    .notice-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.05); border-color: var(--primary); }
    
    .urgent-banner { position: absolute; top: 0; right: 0; background: #ef4444; color: #fff; padding: 5px 20px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; transform: rotate(0deg); border-bottom-left-radius: 15px; }
    .notice-card.urgent { border-left: 5px solid #ef4444; background: #fff8f8; }

    .date-badge { background: #f1f5f9; color: #64748b; padding: 5px 15px; border-radius: 10px; font-size: 11px; font-weight: 700; display: inline-block; margin-bottom: 15px; }
    .course-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--primary); background: rgba(6, 78, 59, 0.05); padding: 4px 10px; border-radius: 6px; }

    .btn-read { background: var(--primary); color: #fff; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 700; border: none; transition: 0.3s; text-decoration: none; display: inline-block; margin-top: 15px; }
    .btn-read:hover { background: #022c22; color: var(--accent); }

    #sidebarToggle { display: none; }
    @media (max-width: 991.98px) {
        #sidebarToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; border-radius: 10px; margin-right: 15px; cursor: pointer; color: var(--primary); }
    }
</style>

<div class="main-content p-3 p-md-5">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 fade-up">
        <div class="d-flex align-items-center">
            <div>
                <h2 class="fw-bold text-dark mb-1">Notice Board</h2>
                <p class="text-muted fw-semibold mb-0">Stay updated with academy announcements</p>
            </div>
        </div>
        <div class="mt-3 mt-md-0">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="noticeSearch" class="form-control shadow-none" placeholder="Search for notices...">
            </div>
        </div>
    </div>

    <div class="row" id="noticeGrid">
        <?php if(empty($notices)): ?>
            <div class="col-12 text-center py-5 fade-up">
                <img src="https://cdn-icons-png.flaticon.com/512/3585/3585145.png" style="width: 100px; opacity: 0.3;" class="mb-4">
                <h4 class="text-muted fw-bold">No announcements found!</h4>
            </div>
        <?php else: foreach($notices as $n): ?>
            <div class="col-md-6 col-lg-4 fade-up notice-item">
                <div class="notice-card <?= $n['is_urgent'] ? 'urgent' : '' ?>">
                    <?php if($n['is_urgent']): ?>
                        <div class="urgent-banner shadow-sm"><i class="fas fa-bolt me-1"></i> Urgent</div>
                    <?php endif; ?>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="date-badge"><i class="far fa-calendar-alt me-1"></i> <?= date('d M, Y', strtotime($n['created_at'])) ?></span>
                        <span class="course-tag"><?= ($n['course_id'] == 0) ? 'General' : 'Course Update' ?></span>
                    </div>

                    <h5 class="fw-bold text-dark mb-3"><?= htmlspecialchars($n['title']) ?></h5>
                    <p class="text-muted small mb-0" style="line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                        <?= htmlspecialchars($n['content']) ?>
                    </p>

                    <a href="javascript:void(0)" class="btn-read" onclick="viewNotice('<?= addslashes($n['title']) ?>', '<?= addslashes($n['content']) ?>', '<?= date('d M, Y', strtotime($n['created_at'])) ?>')">
                        Read Full Details <i class="fas fa-arrow-right ms-1" style="font-size: 10px;"></i>
                    </a>
                </div>
            </div>
        <?php endforeach; endif; ?>
    </div>
</div>

<div class="modal fade" id="noticeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 25px;">
            <div class="modal-header bg-light border-0 px-4 py-3" style="border-radius: 25px 25px 0 0;">
                <h5 class="fw-bold m-0 text-dark"><i class="fas fa-bullhorn text-primary me-2"></i> Announcement Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 p-md-5">
                <div class="mb-4">
                    <span id="modalDate" class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold" style="font-size: 12px;"></span>
                </div>
                <h3 id="modalTitle" class="fw-bold text-dark mb-4"></h3>
                <div id="modalContent" class="text-muted" style="line-height: 1.8; font-size: 16px; white-space: pre-wrap;"></div>
            </div>
            <div class="modal-footer border-0 p-4 pt-0">
                <button type="button" class="btn btn-dark w-100 py-3 rounded-4 fw-bold shadow-sm" data-bs-dismiss="modal">GOT IT</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Notice Filter Functionality
    document.getElementById('noticeSearch').addEventListener('keyup', function() {
        let filter = this.value.toLowerCase();
        let items = document.querySelectorAll('.notice-item');
        
        items.forEach(item => {
            let title = item.querySelector('h5').innerText.toLowerCase();
            let content = item.querySelector('p').innerText.toLowerCase();
            if(title.includes(filter) || content.includes(filter)) {
                item.style.display = "";
            } else {
                item.style.display = "none";
            }
        });
    });

    // View Notice Function
    function viewNotice(title, content, date) {
        document.getElementById('modalTitle').innerText = title;
        document.getElementById('modalContent').innerText = content;
        document.getElementById('modalDate').innerText = "Posted on: " + date;
        var myModal = new bootstrap.Modal(document.getElementById('noticeModal'));
        myModal.show();
    }

    // Sidebar Toggle
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('sidebarToggle')?.addEventListener('click', () => {
            document.getElementById('sidebarMenu').classList.toggle('active');
        });
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<?php include 'includes/user_footer.php'; ?>