kokjan/frontend/views/site/search.php

<?php

/* @var $this \yii\web\View */
/* @var $search \frontend\models\SearchForm */

use yii\helpers\Html;
use yii\bootstrap4\ActiveForm;
use yii\widgets\ListView;

$this->title = $search->load(Yii::$app->request->get()) && !empty($search->q) 
    ? 'ผลการค้นหา: ' . $search->q 
    : 'ค้นหาข้อมูล';

$this->params['breadcrumbs'][] = 'ค้นหา';
?>

<style>
    .search-page-container {
        margin-top: -40px;
        position: relative;
        z-index: 5;
    }

    .search-box-card {
        background: #fff;
        border-radius: 30px;
        padding: 40px;
        box-shadow: 0 15px 50px rgba(44, 24, 16, 0.05);
        border: 1px solid #FFDBBB;
        margin-bottom: 40px;
    }

    .search-input-group {
        display: flex;
        gap: 10px;
    }

    .search-input-group .form-group {
        flex-grow: 1;
        margin-bottom: 0;
    }

    .search-input-group input {
        height: 55px;
        border-radius: 50px;
        padding: 0 30px;
        border: 2px solid #f0f0f0;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .search-input-group input:focus {
        border-color: #FFC068;
        box-shadow: 0 0 0 0.2rem rgba(255, 192, 104, 0.25);
    }

    .btn-search-main {
        height: 55px;
        padding: 0 40px;
        border-radius: 50px;
        background: linear-gradient(135deg, #8e1d1d 0%, #c62828 100%);
        color: #fff;
        border: none;
        font-weight: 700;
        box-shadow: 0 5px 15px rgba(142, 29, 29, 0.2);
        transition: all 0.3s ease;
    }

    .btn-search-main:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(142, 29, 29, 0.3);
        color: #fff;
    }

    .result-section {
        margin-bottom: 50px;
    }

    .result-title {
        font-weight: 800;
        color: #2c1810;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 20px;
    }

    .result-title i {
        color: #FFC068;
    }

    .result-list {
        list-style: none;
        padding: 0;
    }

    .empty-results {
        text-align: center;
        padding: 60px 0;
        color: #bbb;
    }

    .empty-results i {
        font-size: 60px;
        margin-bottom: 20px;
        opacity: 0.3;
    }
</style>

<div class="search-page-container">
    
    <!-- Search Form Card -->
    <div class="search-box-card wow fadeInDown">
        <?php $form = ActiveForm::begin([
            'method' => 'get',
            'action' => ['search'],
            'options' => ['class' => 'search-input-group']
        ]) ?>
            <?= $form->field($search, 'q', [
                'options' => ['class' => 'form-group flex-grow-1'],
                'inputOptions' => ['class' => 'form-control', 'placeholder' => 'พิมพ์คำที่ต้องการค้นหา...', 'autofocus' => true]
            ])->label(false) ?>
            
            <?= Html::submitButton('<i class="fa fa-search mr-2"></i> ค้นหา', ['class' => 'btn-search-main']) ?>
        <?php ActiveForm::end() ?>
    </div>

    <?php if ($search->load(Yii::$app->request->get()) && !empty($search->q)): ?>
        
        <div class="mb-5">
            <h4 class="font-weight-bold">พบผลการค้นหาสำหรับ: <span class="text-danger">"<?= Html::encode($search->q) ?>"</span></h4>
            <hr class="border-warning" style="width: 60px; margin-left: 0; border-width: 3px;">
        </div>

        <!-- Posts Results -->
        <div class="result-section wow fadeInUp">
            <h5 class="result-title"><i class="fa fa-newspaper"></i> ข่าวสารและกิจกรรม</h5>
            <?= ListView::widget([
                'dataProvider' => $postDataProvider,
                'summary' => false,
                'emptyText' => '<div class="p-4 border rounded bg-light text-muted">ไม่พบข้อมูลในหมวดข่าวสาร</div>',
                'itemView' => '_search_post',
                'layout' => "{items}\n<div class='mt-4'>{pager}</div>",
                'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
                'options' => ['class' => 'result-list'],
                'itemOptions' => ['tag' => false]
            ]) ?>
        </div>

        <!-- Pages Results -->
        <div class="result-section wow fadeInUp" data-wow-delay="0.2s">
            <h5 class="result-title"><i class="fa fa-file-alt"></i> หน้าเว็บไซต์</h5>
            <?= ListView::widget([
                'dataProvider' => $pageDataProvider,
                'summary' => false,
                'emptyText' => '<div class="p-4 border rounded bg-light text-muted">ไม่พบข้อมูลในหน้าเว็บไซต์</div>',
                'itemView' => '_search_page',
                'layout' => "{items}\n<div class='mt-4'>{pager}</div>",
                'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
                'options' => ['class' => 'result-list'],
                'itemOptions' => ['tag' => false]
            ]) ?>
        </div>

    <?php else: ?>
        <div class="empty-results wow fadeIn">
            <i class="fa fa-search"></i>
            <h3>กรุณาพิมพ์คำค้นหาเพื่อเริ่มค้นหาข้อมูล</h3>
            <p>คุณสามารถค้นหาได้ทั้งหัวข้อข่าว เนื้อหา หรือชื่อเอกสารต่างๆ</p>
        </div>
    <?php endif; ?>

</div>