<?php
// ১. ডেটাবেস কানেকশন
require_once 'db_connect.php';

$notices = [];
try {
    // ডাটাবেস থেকে সকল পাবলিশড নোটিশ নিয়ে আসা
    $notices = $pdo->query("SELECT * FROM notices WHERE status = 'published' ORDER BY created_at DESC")->fetchAll();
} catch (PDOException $e) {
    // Error handling
}
?>
<?php include 'header.php'; ?>

    <style>
        /* --- Notice Page Hero Section --- */
        .notice-hero {
            background: linear-gradient(135deg, rgba(2, 44, 34, 0.9), rgba(6, 78, 59, 0.8)), 
                        url('https://images.unsplash.com/photo-1504103087323-ee2bd70dbb4d?auto=format&fit=crop&w=1920&q=80') center/cover;
            padding: 80px 0;
            color: white;
            text-align: center;
            margin-bottom: 50px;
            border-bottom: 5px solid var(--accent);
        }
        .notice-hero h1 {
            font-weight: 800;
            font-size: 42px;
            margin-bottom: 10px;
            text-shadow: 2px 2px 15px rgba(0,0,0,0.4);
        }
        .notice-hero p {
            font-size: 18px;
            letter-spacing: 2px;
            color: var(--accent);
        }

        /* --- Premium Notice Card Design --- */
        .notice-card { 
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
            background: #fff;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
        }
        .notice-card:hover { 
            transform: translateY(-8px); 
            border-color: var(--accent);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.1) !important;
        }
        
        /* Date Box on the Left */
        .date-box {
            background-color: var(--primary);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 25px;
            min-width: 130px;
            border-right: 4px solid var(--accent);
            transition: 0.3s;
        }
        .date-day { font-size: 36px; font-weight: 800; line-height: 1; color: var(--accent); }
        .date-month { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 8px; opacity: 0.9; }
        
        .notice-content { padding: 30px; flex-grow: 1; }
        .notice-title { color: var(--primary-dark); font-weight: 800; font-size: 22px; margin-bottom: 12px; }
        .notice-excerpt { color: #64748b; font-size: 15px; line-height: 1.7; margin-bottom: 0; }
        
        .notice-action {
            padding: 30px;
            display: flex;
            align-items: center;
            background-color: #f8fafc;
            border-left: 1px solid #eef2f6;
        }

        /* --- Modal Styling --- */
        .modal-content { border-radius: 25px; border: none; overflow: hidden; }
        .modal-header { background: var(--primary); color: white; border-bottom: 4px solid var(--accent); padding: 20px 30px; }
        .modal-title { font-weight: 700; }
        .modal-body { padding: 40px; font-family: 'Outfit', sans-serif; }
        
        @media (max-width: 991px) { 
            .notice-card { flex-direction: column; }
            .date-box { min-width: 100%; border-right: none; border-bottom: 4px solid var(--accent); flex-direction: row; gap: 15px; padding: 15px; }
            .date-day { font-size: 28px; }
            .notice-content { padding: 25px; text-align: center; }
            .notice-action { border-left: none; border-top: 1px solid #eee; padding: 20px; justify-content: center; }
            .notice-hero h1 { font-size: 32px; }
        }
    </style>

    <section class="notice-hero">
        <div class="container">
            <h1>Important Notice Board</h1>
            <p class="text-uppercase fw-bold">Official Updates & Announcements</p>
        </div>
    </section>

    <section class="pb-5" style="background-color: var(--bg-soft);">
        <div class="container">
            <?php if(empty($notices)): ?>
                <div class="text-center py-5">
                    <div class="p-5 bg-white shadow-sm rounded-5 mx-auto" style="max-width: 600px;">
                        <i class="fas fa-bullhorn fa-4x mb-4" style="color: #cbd5e1;"></i>
                        <h4 class="text-muted">No notices published yet.</h4>
                        <p class="small text-muted">Please check back later for official academy updates.</p>
                    </div>
                </div>
            <?php endif; ?>

            <div class="row justify-content-center">
                <div class="col-lg-10">
                    
                    <?php 
                    $modals_html = ""; // সব মোডাল স্টোর করার ভেরিয়েবল
                    foreach($notices as $note): 
                        // ডেট ফরম্যাটিং
                        $timestamp = strtotime($note['created_at']);
                        $day = date('d', $timestamp);
                        $month_year = date('M, Y', $timestamp);
                    ?>
                        
                        <div class="card notice-card mb-4 d-flex flex-md-row">
                            <div class="date-box">
                                <span class="date-day"><?php echo $day; ?></span>
                                <span class="date-month"><?php echo $month_year; ?></span>
                            </div>
                            
                            <div class="notice-content">
                                <h5 class="notice-title"><?php echo htmlspecialchars($note['title']); ?></h5>
                                <p class="notice-excerpt"><?php echo mb_substr(strip_tags($note['content']), 0, 150); ?>...</p>
                            </div>
                            
                            <div class="notice-action">
                                <?php if(!empty($note['file_path'])): ?>
                                    <a href="<?php echo htmlspecialchars($note['file_path']); ?>" target="_blank" class="btn btn-dark px-4 py-2 rounded-pill fw-bold shadow-sm w-100 text-nowrap" style="background: var(--primary-dark);">
                                        <i class="fas fa-file-download me-2 text-warning"></i> Download PDF
                                    </a>
                                <?php else: ?>
                                    <button type="button" class="btn px-4 py-2 rounded-pill fw-bold w-100 text-nowrap shadow-sm" data-bs-toggle="modal" data-bs-target="#noticeModal_<?php echo $note['id']; ?>" style="background: var(--accent); color: var(--primary-dark); border: none;">
                                        <i class="fas fa-envelope-open-text me-2"></i> View Details
                                    </button>
                                    
                                    <?php 
                                    // Modal HTML storage
                                    $modals_html .= '
                                    <div class="modal fade" id="noticeModal_'.$note['id'].'" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content shadow-lg">
                                                <div class="modal-header">
                                                    <h5 class="modal-title mb-0">'.htmlspecialchars($note['title']).'</h5>
                                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="d-flex align-items-center mb-4 pb-3 border-bottom">
                                                        <div class="me-3 p-3 rounded-circle" style="background: rgba(212, 175, 55, 0.1);">
                                                            <i class="far fa-calendar-check fa-2x" style="color: var(--accent);"></i>
                                                        </div>
                                                        <div>
                                                            <span class="d-block text-muted small text-uppercase fw-bold" style="letter-spacing:1px;">Published On</span>
                                                            <strong class="fs-5" style="color: var(--primary);">'.date('d F, Y', $timestamp).'</strong>
                                                        </div>
                                                    </div>
                                                    <div style="line-height: 1.9; font-size: 1.1rem; color: #334155; white-space: pre-line;">
                                                        '.htmlspecialchars($note['content']).'
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-0 pt-0 justify-content-center pb-4">
                                                    <button type="button" class="btn btn-outline-secondary rounded-pill px-5 fw-bold" data-bs-dismiss="modal">Close Notice</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>';
                                    ?>
                                <?php endif; ?>
                            </div>
                        </div>

                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <?php echo $modals_html; ?>

<?php include 'footer.php'; ?>