kokjan/frontend/views/post/view.php

<?php
/* @var $this yii\web\View */

use yii\helpers\HtmlPurifier;
use yii\helpers\Html;

$this->title = $model->name;
$this->params['breadcrumbs'][] = ['label' => $model->cmsCategory->name, 'url' => ['index', 'id' => $model->cms_category_id]];
$this->params['breadcrumbs'][] = $this->title;

$photos = !empty($model->gallery) ? explode(',', $model->gallery) : [];
?>

<style>
    /* Professional Post Styling - Refined for Peach/Gold Theme */
    .post-view-container {
        background: #fff;
        border-radius: 35px;
        box-shadow: 0 20px 60px rgba(44, 24, 16, 0.1);
        border: 1px solid #FFDBBB;
        overflow: hidden;
        margin-top: -60px; /* Enhanced overlap with header */
        position: relative;
        z-index: 10;
        margin-bottom: 40px;
    }

    .post-header-meta {
        background: #fffef9; /* Very light gold tint */
        padding: 25px 45px;
        border-bottom: 2px solid #fdf0e6;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        align-items: center;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #5d4037;
        font-weight: 600;
    }

    .meta-item i {
        color: #ff8f00;
        font-size: 18px;
    }

    .meta-item a {
        color: #8e1d1d;
        transition: all 0.3s ease;
        text-decoration: none !important;
    }

    .meta-item a:hover {
        color: #ff8f00;
    }

    .post-body-wrap {
        padding: 60px;
        position: relative;
        background-color: #fff;
    }

    /* Traditional Corner Ornaments */
    .post-body-wrap::before, .post-body-wrap::after {
        content: '';
        position: absolute;
        width: 120px; height: 120px;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.15;
        pointer-events: none;
    }
    .post-body-wrap::before {
        top: 20px; left: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 L20 0 L20 80 L100 80 L100 100 L0 100 Z' fill='%23FFC068'/%3E%3C/svg%3E");
    }
    .post-body-wrap::after {
        bottom: 20px; right: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 100 L80 100 L80 20 L0 20 L0 0 L100 0 Z' fill='%23FFC068'/%3E%3C/svg%3E");
    }

    .post-content {
        font-size: 19px;
        line-height: 1.9;
        color: #2c1810;
        word-break: break-word;
        position: relative;
        z-index: 1;
    }

    .post-content img {
        max-width: 100%;
        height: auto !important;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        margin: 30px auto;
        display: block;
        border: 5px solid #fff;
    }

    /* List styling inside content */
    .post-content ul, .post-content ol {
        padding-left: 40px;
        margin: 25px 0;
    }
    .post-content li {
        margin-bottom: 12px;
    }

    /* Gallery Section - More Majestic */
    .gallery-section {
        background: #fdfaf5;
        padding: 50px 60px;
        border-top: 3px solid #FFDBBB;
    }

    .gallery-title {
        font-weight: 900;
        color: #2c1810;
        margin-bottom: 35px;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 24px;
    }

    .gallery-title span {
        background: #8e1d1d;
        color: #fff;
        padding: 5px 15px;
        border-radius: 8px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .gallery-thumb {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        border: 4px solid #fff;
        box-shadow: 0 8px 20px rgba(44, 24, 16, 0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
    }

    .gallery-thumb img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .gallery-thumb:hover {
        transform: translateY(-10px);
        border-color: #FFC068;
        box-shadow: 0 15px 30px rgba(255, 192, 104, 0.3);
    }

    .gallery-thumb:hover img {
        transform: scale(1.1);
    }

    .gallery-thumb::after {
        content: '\f00e';
        font-family: 'FontAwesome';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0);
        color: #fff;
        font-size: 24px;
        background: rgba(142, 29, 29, 0.6);
        width: 50px; height: 50px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .gallery-thumb:hover::after {
        transform: translate(-50%, -50%) scale(1);
    }

    /* Modal Styling */
    #galleryModal .modal-content {
        background: rgba(0, 0, 0, 0.95);
        border: none;
        border-radius: 25px;
    }

    #galleryModal .close {
        color: #FFC068;
        opacity: 1;
        text-shadow: none;
        font-size: 32px;
        padding: 20px;
    }

    #galleryCarousel .carousel-control-prev,
    #galleryCarousel .carousel-control-next {
        width: 8%;
        opacity: 0.8;
    }

    .carousel-nav-btn {
        width: 55px;
        height: 55px;
        background: #FFC068;
        color: #2c1810;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: all 0.3s ease;
    }

    .carousel-nav-btn:hover {
        background: #fff;
        color: #8e1d1d;
        transform: scale(1.1);
    }

    .share-section {
        padding: 30px 60px;
        background: #fff;
        border-top: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .share-label {
        font-weight: 800;
        color: #8e1d1d;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    @media (max-width: 768px) {
        .post-view-container { margin-top: -30px; border-radius: 25px; }
        .post-header-meta { padding: 20px; gap: 15px; }
        .post-body-wrap { padding: 40px 20px; }
        .gallery-section { padding: 40px 20px; }
        .share-section { padding: 25px 20px; flex-direction: column; gap: 20px; text-align: center; }
        .gallery-thumb img { height: 180px; }
    }
</style>

<div class="post-view-container wow fadeInUp" data-wow-duration="1s">
    <!-- Meta Info Bar -->
    <div class="post-header-meta">
        <div class="meta-item">
            <i class="fa fa-calendar-alt"></i>
            <span>เผยแพร่เมื่อ: <?= Yii::$app->formatter->asDate($model->publish_at) ?></span>
        </div>
        <div class="meta-item">
            <i class="fa fa-folder-open"></i>
            <?= Html::a($model->cmsCategory->name, ['/post/index', 'id' => $model->cms_category_id]) ?>
        </div>
        <div class="meta-item">
            <i class="fa fa-user-circle"></i>
            <?= Html::a($model->createdBy->name, ['/post/author', 'id' => $model->created_by]) ?>
        </div>
        <div class="meta-item">
            <i class="fa fa-eye"></i>
            <span>เข้าชม <?= number_format($model->hit) ?> ครั้ง</span>
        </div>
    </div>

    <!-- Main Content -->
    <div class="post-body-wrap">
        <div class="post-content">
            <?= $model->description ?>
            
            <?php if ($model->getFileFrontViewer()): ?>
                <div class="mt-5 pt-5 border-top">
                    <h5 class="font-weight-bold mb-4" style="color: #8e1d1d;">
                        <i class="fa fa-file-download mr-2"></i> เอกสารแนบท้ายประกาศ
                    </h5>
                    <div class="bg-light p-4 rounded-lg">
                        <?= $model->getFileFrontViewer() ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Photo Gallery -->
    <?php if (!empty($photos)) { ?>
        <div class="gallery-section">
            <h4 class="gallery-title">
                <i class="fa fa-camera-retro text-warning"></i> 
                อัลบั้มภาพกิจกรรม
                <span><?= count($photos) ?> รูปภาพ</span>
            </h4>
            <div class="gallery-content">
                <div class="row">
                    <?php foreach ($photos as $index => $photo): ?>
                        <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                            <div class="gallery-thumb" data-index="<?= $index ?>">
                                <?= Html::img($model->getGalleryUrl() . '/' . $photo, [
                                    'alt' => 'รูปภาพกิจกรรม ' . ($index + 1)
                                ]) ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Modal for Image Slider -->
        <div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                <div class="modal-content shadow-lg">
                    <div class="modal-header border-0 pb-0">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <div id="galleryCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
                            <div class="carousel-inner">
                                <?php foreach ($photos as $index => $photo): ?>
                                    <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
                                        <div class="d-flex align-items-center justify-content-center" style="height: 75vh;">
                                            <?= Html::img($model->getGalleryUrl() . '/' . $photo, [
                                                'class' => 'img-fluid',
                                                'style' => 'max-height: 100%; border-radius: 10px;'
                                            ]) ?>
                                        </div>
                                        <div class="carousel-caption d-none d-md-block bg-dark-transparent py-2 rounded-pill">
                                            <p class="mb-0">รูปที่ <?= ($index + 1) ?> / <?= count($photos) ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            <a class="carousel-control-prev" href="#galleryCarousel" role="button" data-slide="prev">
                                <div class="carousel-nav-btn">
                                    <i class="fa fa-chevron-left"></i>
                                </div>
                            </a>
                            <a class="carousel-control-next" href="#galleryCarousel" role="button" data-slide="next">
                                <div class="carousel-nav-btn">
                                    <i class="fa fa-chevron-right"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php } ?>

    <!-- Social Share -->
    <div class="share-section">
        <div class="share-label">
            <i class="fa fa-share-alt"></i> แบ่งปันข้อมูลข่าวสารนี้
        </div>
        <div class="sharethis-inline-share-buttons"></div>
    </div>
</div>

<!-- Load ShareThis JS -->
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=6392a5ec44c4120012bde3f8&product=inline-share-buttons&source=platform" async="async"></script>

<?php
$this->registerJs("
    $('.gallery-thumb').on('click', function() {
        var index = $(this).data('index');
        $('#galleryCarousel').carousel(index);
        $('#galleryModal').modal('show');
    });

    // Keyboard navigation
    $(document).keydown(function(e) {
        if ($('#galleryModal').is(':visible')) {
            if (e.keyCode == 37) $('#galleryCarousel').carousel('prev');
            if (e.keyCode == 39) $('#galleryCarousel').carousel('next');
        }
    });
");
?>