先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也先帝は天下を興す志半ばにして志半ばにして崩御されました。今、天下は三つに分かれ、益州は疲弊しており、まさに存亡の危機に瀕しております。しかしながら、宮中で職務に励む臣下や、外地で身を顧みず尽力する志士たちがいるのは、ひとえに先帝から受けた格別な恩義を思い、陛下に報いようとする志があるからです。今こそ陛下には広く臣下の意見に耳を傾け、先帝の遺徳を輝かせ、志士たちの士気を高めるべきです。決して自らを卑下したり、不適切な例えを用いて忠言の道を閉ざしたりしてはなりません。鍏堝笣鍒涗笟鏈崐鑰屼腑閬撳穿娈傦紝浠婂ぉ涓嬩笁鍒嗭紝鐩婂窞鐤插紛锛屾璇氬嵄鎬ュ瓨浜′箣绉嬩篃銆傜劧渚嶅崼涔嬭嚕涓嶆噲浜庡唴锛屽繝蹇椾箣澹繕韬簬澶栬€咃紝鐩栬拷鍏堝笣涔嬫畩閬囷紝娆叉姤涔嬩簬闄涗笅涔熴€傝瘹瀹滃紑寮犲湥鍚紝浠ュ厜鍏堝笣閬楀痉锛屾仮寮樺織澹箣姘旓紝涓嶅疁濡勮嚜鑿茶杽锛屽紩鍠诲け涔夛紝浠ュ蹇犺皬涔嬭矾涔🌌 SpectraShell

🌌 SpectraShell

Current path: home/infuteik/public_html/icfkolkata.com/



⬆️ Go up: /home/infuteik/public_html

📄 Viewing: detail.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Details</title>
</head>
<?php
require_once __DIR__ . '/admin/db.php';
$eventId = (int)($_GET['id'] ?? 0);
$stmt = $conn->prepare("SELECT * FROM events WHERE id = ?");
$stmt->bind_param("i", $eventId);
$stmt->execute();
$event = $stmt->get_result()->fetch_assoc();
if (!$event) { header('Location: event.php'); exit; }

// Related events (other events excluding current)
$relStmt = $conn->prepare("SELECT id, title, date, location, image FROM events WHERE id != ? ORDER BY date DESC LIMIT 6");
$relStmt->bind_param("i", $eventId);
$relStmt->execute();
$result = $relStmt->get_result();
$relatedEvents = [];
while ($row = $result->fetch_assoc()) {
    $relatedEvents[] = $row;
}

// If no related events found, show all events (fallback)
if (empty($relatedEvents)) {
    $allResult = $conn->query("SELECT id, title, date, location, image FROM events ORDER BY date DESC LIMIT 6");
    if ($allResult) {
        while ($row = $allResult->fetch_assoc()) {
            if ($row['id'] != $eventId) {
                $relatedEvents[] = $row;
            }
        }
    }
}
// DEBUG
echo "<!-- DEBUG: Current Event ID: $eventId | Related Events Found: " . count($relatedEvents) . " -->\n";

$detailImages = array_values(array_filter([
    $event['detail_image1'] ?? '',
    $event['detail_image2'] ?? '',
    $event['detail_image3'] ?? '',
    $event['detail_image4'] ?? ''
]));
?>
<?php include 'header.php'; ?>

<!-- breadcrumb -->
<div class="site-breadcrumb">
    <div class="container">
        <h2 class="breadcrumb-title"><?= htmlspecialchars($event['title']) ?></h2>
        <ul class="breadcrumb-menu">
            <li><a href="index.php">Home</a></li>
            <li><a href="event.php">Events</a></li>
            <li><?= htmlspecialchars($event['title']) ?></li>
        </ul>
    </div>
</div>
<!-- breadcrumb end -->

<style>
/* ── Event Detail Page Styles ── */
.event-detail-wrap { padding: 60px 0; background: #f8f9fb; }

/* Hero Banner */
.event-hero { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 40px; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.event-hero img { width: 100%; height: 420px; object-fit: cover; display: block; }
.event-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,30,70,.85) 40%, transparent 100%); }
.event-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 40px; color: #fff; }
.event-hero-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 14px; line-height: 1.3;   color: #fff;}
.event-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); border-radius: 30px; padding: 6px 16px; font-size: .85rem; color: #fff; margin-right: 8px; margin-bottom: 8px; }
.event-badge i { color: #f0a500; }

/* Info Cards */
.info-strip { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.info-strip-card { flex: 1; min-width: 160px; background: #fff; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(0,0,0,.07); display: flex; align-items: center; gap: 14px; }
.info-strip-card .icon { width: 46px; height: 46px; border-radius: 10px; background: #1a3c6e; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.info-strip-card .label { font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.info-strip-card .value { font-size: .95rem; font-weight: 600; color: #1a3c6e; }

/* Section Cards */
.detail-section { background: #fff; border-radius: 14px; padding: 32px 36px; box-shadow: 0 2px 12px rgba(0,0,0,.07); margin-bottom: 28px; }
.detail-section .sec-title { font-size: 1.25rem; font-weight: 700; color: #1a3c6e; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e8edf5; display: flex; align-items: center; gap: 10px; }
.detail-section .sec-title i { color: #f0a500; }

/* Description */
.desc-text { font-size: 1rem; line-height: 1.85; color: #444; text-align: justify; }

/* Highlights */
.highlight-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.highlight-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: #444; }
.highlight-list li i { color: #1a3c6e; margin-top: 3px; flex-shrink: 0; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.gallery-grid img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; transition: transform .3s; cursor: pointer; }
.gallery-grid img:hover { transform: scale(1.04); }

/* Share */
.share-links { display: flex; gap: 12px; flex-wrap: wrap; }
.share-links a { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; text-decoration: none; transition: transform .2s, opacity .2s; }
.share-links a:hover { transform: translateY(-3px); opacity: .85; }
.share-fb  { background: #1877f2; }
.share-tw  { background: #000; }
.share-li  { background: #0a66c2; }
.share-yt  { background: #ff0000; }
.share-wa  { background: #25d366; }

/* Sidebar */
.sidebar-card { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.07); margin-bottom: 24px; }
.sidebar-card .s-title { font-size: 1rem; font-weight: 700; color: #1a3c6e; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #e8edf5; }
.register-btn { display: block; width: 100%; background: #1a3c6e; color: #fff; text-align: center; padding: 14px; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background .2s; }
.register-btn:hover { background: #14305a; color: #fff; }
.sidebar-img { width: 100%; border-radius: 12px; object-fit: cover; max-height: 220px; }
</style>

<div class="event-detail-wrap">
  <div class="container">
    <div class="row g-4">

      <!-- ── LEFT MAIN CONTENT ── -->
      <div class="col-lg-8">

        <!-- Hero Banner -->
        <div class="event-hero">
          <img src="<?= htmlspecialchars($event['image']) ?>" alt="<?= htmlspecialchars($event['title']) ?>" />
          <div class="event-hero-overlay"></div>
          <div class="event-hero-content">
            <h1><?= htmlspecialchars($event['title']) ?></h1>
            <span class="event-badge"><i class="far fa-calendar-days"></i> <?= date('M j, Y', strtotime($event['date'])) ?></span>
            <span class="event-badge"><i class="far fa-location-dot"></i> <?= htmlspecialchars($event['location']) ?></span>
            <?php if (!empty($event['speaker'])): ?>
            <span class="event-badge"><i class="far fa-user"></i> <?= htmlspecialchars($event['speaker']) ?></span>
            <?php endif; ?>
          </div>
        </div>

        <!-- Info Strip -->
        <div class="info-strip">
          <div class="info-strip-card">
            <div class="icon"><i class="far fa-calendar-days"></i></div>
            <div><div class="label">Date</div><div class="value"><?= date('d M Y', strtotime($event['date'])) ?></div></div>
          </div>
          <div class="info-strip-card">
            <div class="icon"><i class="far fa-location-dot"></i></div>
            <div><div class="label">Location</div><div class="value"><?= htmlspecialchars($event['location']) ?></div></div>
          </div>
          <?php if (!empty($event['speaker'])): ?>
          <div class="info-strip-card">
            <div class="icon"><i class="fas fa-microphone"></i></div>
            <div><div class="label">Speaker</div><div class="value"><?= htmlspecialchars($event['speaker']) ?></div></div>
          </div>
          <?php endif; ?>
          <?php if (!empty($event['price'])): ?>
          <div class="info-strip-card">
            <div class="icon"><i class="fas fa-tag"></i></div>
            <div><div class="label">Per Seat Price</div><div class="value"><?= htmlspecialchars($event['price']) ?></div></div>
          </div>
          <?php endif; ?>
        </div>

        <!-- About This Event -->
        <?php if (!empty($event['description'])): ?>
        <div class="detail-section">
          <div class="sec-title"><i class="fas fa-info-circle"></i> About This Event</div>
          <p class="desc-text"><?= nl2br(htmlspecialchars($event['description'])) ?></p>
        </div>
        <?php endif; ?>

        <!-- What You Will Learn -->
        <?php 
        $highlights = array_filter(array_map('trim', explode("\n", $event['highlights'] ?? '')));
        if (!empty($highlights)): ?>
        <div class="detail-section">
          <div class="sec-title"><i class="fas fa-lightbulb"></i> What You Will Gain</div>
          <ul class="highlight-list">
            <?php foreach ($highlights as $h): ?>
            <li><i class="fas fa-check-circle"></i> <?= htmlspecialchars($h) ?></li>
            <?php endforeach; ?>
          </ul>
        </div>
        <?php endif; ?>

        <!-- Who Should Attend -->
        <?php 
        $whoList = array_filter(array_map('trim', explode("\n", $event['who_should_attend'] ?? '')));
        if (!empty($whoList)): ?>
        <div class="detail-section">
          <div class="sec-title"><i class="fas fa-users"></i> Who Should Attend</div>
          <ul class="highlight-list">
            <?php foreach ($whoList as $w): ?>
            <li><i class="fas fa-arrow-right"></i> <?= htmlspecialchars($w) ?></li>
            <?php endforeach; ?>
          </ul>
        </div>
        <?php endif; ?>

        <!-- Event Gallery -->
        <?php if (!empty($detailImages)): ?>
        <div class="detail-section">
          <div class="sec-title"><i class="fas fa-images"></i> Event Gallery</div>
          <div class="gallery-grid">
            <?php foreach ($detailImages as $img): ?>
              <img src="<?= htmlspecialchars($img) ?>" alt="Event" />
            <?php endforeach; ?>
          </div>
        </div>
        <?php endif; ?>

        <!-- Share -->
        <div class="detail-section">
          <div class="sec-title"><i class="fas fa-share-alt"></i> Share This Event</div>
          <div class="share-links">
            <a href="#" class="share-fb"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="share-tw"><i class="fab fa-x-twitter"></i></a>
            <a href="#" class="share-li"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="share-yt"><i class="fab fa-youtube"></i></a>
            <a href="#" class="share-wa"><i class="fab fa-whatsapp"></i></a>
          </div>
        </div>

      </div><!-- /col-lg-8 -->

      <!-- ── RIGHT SIDEBAR ── -->
      <div class="col-lg-4">

        <!-- Thumbnail -->
        <div class="sidebar-card">
          <img src="<?= htmlspecialchars($event['image']) ?>" alt="<?= htmlspecialchars($event['title']) ?>" class="sidebar-img" />
        </div>

        <!-- Register -->
        <div class="sidebar-card">
          <div class="s-title">Register Now</div>
          <?php if (!empty($event['price'])): ?>
            <p style="font-size:1.4rem;font-weight:700;color:#1a3c6e;margin-bottom:16px;"><?= htmlspecialchars($event['price']) ?></p>
          <?php endif; ?>
          <?php $regLink = !empty($event['register_link']) ? $event['register_link'] : 'booking.php?event_id=' . $event['id']; ?>
          <a href="<?= htmlspecialchars($regLink) ?>" class="register-btn" <?= strpos($regLink, 'http') === 0 ? 'target="_blank"' : '' ?>>
            <i class="fas fa-ticket-alt me-2"></i>Book Your Seat
          </a>
        </div>

        <!-- Event Details Summary -->
        <div class="sidebar-card">
          <div class="s-title">Event Details</div>
          <table class="table table-borderless mb-0" style="font-size:.9rem;">
            <tr><td class="text-muted ps-0">Date</td><td class="fw-600"><?= date('d M Y', strtotime($event['date'])) ?></td></tr>
            <tr><td class="text-muted ps-0">Location</td><td><?= htmlspecialchars($event['location']) ?></td></tr>
            <?php if (!empty($event['speaker'])): ?>
            <tr><td class="text-muted ps-0">Speaker</td><td><?= htmlspecialchars($event['speaker']) ?></td></tr>
            <?php endif; ?>
            <?php if (!empty($event['price'])): ?>
            <tr><td class="text-muted ps-0">Price</td><td><?= htmlspecialchars($event['price']) ?></td></tr>
            <?php endif; ?>
          </table>
        </div>

        <!-- Back Button -->
        <a href="event.php" style="display:block;text-align:center;padding:12px;border:2px solid #1a3c6e;border-radius:10px;color:#1a3c6e;font-weight:600;text-decoration:none;">
          <i class="fas fa-arrow-left me-2"></i>Back to Events
        </a>

      </div><!-- /col-lg-4 -->

    </div><!-- /row -->
  </div><!-- /container -->
</div>

<!-- ── RELATED EVENTS CAROUSEL ── -->
<?php if (!empty($relatedEvents)): ?>
<style>
.related-section { padding: 50px 0 60px; background: #f8f9fb; }
.related-section .sec-heading { font-size: 1.5rem; font-weight: 700; color: #1a3c6e; margin-bottom: 30px; text-align: center; }
.rel-owl .item { padding: 0 10px; }
.rel-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.09); background: #fff; transition: transform .3s; height: 100%; display: block; }
.rel-card:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.rel-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.rel-card-body { padding: 18px 20px 22px; }
.rel-card-body .rel-meta { font-size: .8rem; color: #888; margin-bottom: 8px; }
.rel-card-body h5 { font-size: .95rem; font-weight: 600; color: #222; line-height: 1.45; margin-bottom: 12px; min-height: 42px; }
.rel-card-body a.rel-read { font-size: .85rem; color: #1a3c6e; font-weight: 600; text-decoration: none; display: inline-block; }
.rel-card-body a.rel-read:hover { color: #f0a500; }
.rel-nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.rel-nav button { width: 48px; height: 48px; border-radius: 8px; border: 2px solid #1a3c6e; background: #fff; color: #1a3c6e; font-size: 1rem; cursor: pointer; transition: all .2s; }
.rel-nav button:hover { background: #1a3c6e; color: #fff; }
.rel-owl .owl-dots { text-align: center; margin-top: 20px; }
.rel-owl .owl-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; display: inline-block; margin: 0 4px; }
.rel-owl .owl-dot.active { background: #1a3c6e; }
</style>
<div class="related-section">
  <div class="container">
    <h3 class="sec-heading">Related Events</h3>
    <div class="owl-carousel rel-owl owl-theme">
      <?php foreach ($relatedEvents as $rel): ?>
      <div class="item">
        <div class="rel-card">
          <a href="detail.php?id=<?= $rel['id'] ?>">
            <img src="<?= htmlspecialchars($rel['image']) ?>" alt="<?= htmlspecialchars($rel['title']) ?>" />
          </a>
          <div class="rel-card-body">
            <div class="rel-meta">
              <i class="far fa-calendar-days me-1"></i><?= date('M j, Y', strtotime($rel['date'])) ?>
              &nbsp;&bull;&nbsp;
              <i class="far fa-location-dot me-1"></i><?= htmlspecialchars($rel['location']) ?>
            </div>
            <h5><?= htmlspecialchars($rel['title']) ?></h5>
            <a href="detail.php?id=<?= $rel['id'] ?>" class="rel-read">Read More <i class="fas fa-arrow-right ms-1"></i></a>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="rel-nav">
      <button id="relPrev"><i class="fas fa-chevron-left"></i></button>
      <button id="relNext"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>
</div>
<?php else: ?>
<!-- DEBUG: No related events found. Total events in DB excluding current: <?= count($relatedEvents) ?> -->
<?php endif; ?>

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

<script>

jQuery(document).ready(function($){
    var itemCount = $('.rel-owl .item').length;
    console.log('Related events found:', itemCount);
    // if (itemCount > 0) {
    //       if (itemCount <=3) {
    //     $('.rel-nav').hide();
    // }
    //     var owl = $('.rel-owl').owlCarousel({
    //         loop: itemCount>3,
    //         margin: 24,
    //         nav: false,
    //         dots: true,
    //         autoplay: true,
    //         autoplayTimeout: 4000,
    //         autoplayHoverPause: true,
    //  responsive: {
    //         0: {
    //             items: 1
    //         },
    //         576: {
    //             items: 2
    //         },
    //         992: {
    //             items: 3
    //         }
    //     }
    //         // responsive: {
    //         //     0:   { items: 1 },
    //         //     576: { items: 2 },
    //         //     992: { items: Math.min(itemCount, 3) }
    //         // }
    //     });
    //     $('#relPrev').on('click', function(e){
    //         e.preventDefault();
    //         owl.trigger('prev.owl.carousel');
    //     });
    //     $('#relNext').on('click', function(e){
    //         e.preventDefault();
    //         owl.trigger('next.owl.carousel');
    //     });
    // }
    
    if (itemCount > 0) {

    // Hide arrows if not enough items to slide
    if (itemCount <= 3) {
        $('.rel-nav').hide();
    }

    var owl = $('.rel-owl').owlCarousel({
        loop: itemCount > 3,
        margin: 24,
        nav: false,
        dots: true,
        autoplay: itemCount > 3,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            576: {
                items: 2
            },
            992: {
                items: 3
            }
        }
    });

    $('#relPrev').on('click', function(e){
        e.preventDefault();
        owl.trigger('prev.owl.carousel');
    });

    $('#relNext').on('click', function(e){
        e.preventDefault();
        owl.trigger('next.owl.carousel');
    });
}
});
</script>


📁