kokjan/frontend/themes/mali/views/layouts/_bottom.php

<?php

use common\models\CmsPost;
use common\models\CmsEgp;
use common\models\CmsFile;
use common\models\CmsFileCategory;
use common\models\Ebook;
use common\models\EbookCategory;
use yii\data\ActiveDataProvider;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\widgets\ListView;
use yii\widgets\Pjax;
use yii2fullcalendar\yii2fullcalendar;

?>

<!-- EGP/book -->
<style>
  .egp-section {
    padding: 100px 0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 L25 15 L40 20 L25 25 L20 40 L15 25 L0 20 L15 15 Z' fill='%23FFDBBB' fill-opacity='0.05'/%3E%3C/svg%3E");
    position: relative;
  }

  .egp-main-tabs {
    border-bottom: 3px solid #FFDBBB;
    justify-content: center;
    margin-bottom: 50px;
    gap: 15px;
  }

  .egp-main-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    color: #888 !important;
    font-size: 20px;
    font-weight: 700;
    padding: 15px 30px !important;
    position: relative;
    transition: all 0.3s ease;
    font-family: 'Kanit', sans-serif;
  }

  .egp-main-tabs .nav-link.active {
    color: #8e1d1d !important;
    /* Thai Red */
  }

  .egp-main-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FFC068 0%, #8e1d1d 100%);
    border-radius: 2px;
  }

  .egp-type-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    background: #fdfaf5;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #FFDBBB;
  }

  .egp-type-pills .nav-item {
    margin: 0;
  }

  .egp-type-pills .nav-link {
    background: #fff !important;
    border: 1px solid #FFDBBB !important;
    color: #555 !important;
    border-radius: 12px !important;
    padding: 8px 18px !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .egp-type-pills .nav-link.active {
    background: #FFC068 !important;
    color: #2c1810 !important;
    border-color: #2c1810 !important;
    box-shadow: 0 4px 12px rgba(255, 192, 104, 0.3);
    transform: translateY(-2px);
  }

  .egp-type-pills .nav-link:hover:not(.active) {
    border-color: #FFC068 !important;
    color: #FFC068 !important;
    background: #fffef9 !important;
  }

  .egp-content-card {
    background: #fff;
    border-radius: 25px;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
    min-height: 400px;
  }

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

  .egp-empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.3;
  }
</style>

<div class="egp-section section-bg6">
  <div class="container-fluid px-lg-5">

    <div class="main-title mb-5">
      <div class="text-center">
        <span class="ita-badge" style="background: #8e1d1d;">Procurement & Documents</span>
        <h2 class="ita-title mt-2">ข้อมูลการจัดซื้อจัดจ้างและ <span>หนังสือราชการ</span></h2>
      </div>
    </div>

    <ul class="nav nav-tabs egp-main-tabs" id="egpMainTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="egp-tab" data-toggle="tab" href="#egp" role="tab" aria-selected="true">
          <i class="fa fa-gavel mr-2"></i> ประกาศจัดซื้อจัดจ้าง e-GP
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="bookst-tab" data-toggle="tab" href="#bookst" role="tab" aria-selected="false">
          <i class="fa fa-file-text mr-2"></i> หนังสือราชการ สถ.
        </a>
      </li>
    </ul>

    <div class="tab-content" id="egpMainTabContent">
      <!-- e-GP Tab -->
      <div class="tab-pane fade show active" id="egp" role="tabpanel">
        <?php
        $type = [
          'P0' => ['label' => 'แผนจัดซื้อฯ', 'icon' => 'fa-calendar'],
          '15' => ['label' => 'ราคากลาง', 'icon' => 'fa-money'],
          'B0' => ['label' => 'ร่างเอกสารฯ', 'icon' => 'fa-file-text-o'],
          'D0' => ['label' => 'ประกาศเชิญชวน', 'icon' => 'fa-bullhorn'],
          'W0' => ['label' => 'รายชื่อผู้ชนะ', 'icon' => 'fa-trophy'],
          'D1' => ['label' => 'ยกเลิกประกาศ', 'icon' => 'fa-times-circle'],
          'W1' => ['label' => 'ยกเลิกผู้ชนะ', 'icon' => 'fa-user-times'],
          'D2' => ['label' => 'เปลี่ยนแปลงประกาศ', 'icon' => 'fa-edit'],
          'W2' => ['label' => 'เปลี่ยนแปลงรายชื่อ', 'icon' => 'fa-user-plus']
        ];
        ?>

        <ul class="nav nav-pills egp-type-pills" id="egpPillsTab" role="tablist">
          <?php
          $i = 1;
          foreach ($type as $key => $val) { ?>
            <li class="nav-item">
              <a class="nav-link <?= $key == 'W0' ? 'active' : '' ?>" id="pills-egp<?= $i ?>-tab"
                data-toggle="pill" href="#pills-egp<?= $i ?>" role="tab" aria-selected="true">
                <i class="fa <?= $val['icon'] ?>"></i> <?= $val['label'] ?>
              </a>
            </li>
          <?php $i++;
          } ?>
        </ul>

        <div class="egp-content-card">
          <div class="tab-content" id="egpPillsTabContent">
            <?php
            $i = 1;
            foreach ($type as $key => $val) { ?>
              <div class="tab-pane fade show <?= $key == 'W0' ? 'active' : '' ?>"
                id="pills-egp<?= $i ?>" role="tabpanel">
                <?php
                $dataProvider = new ActiveDataProvider([
                  'query' => CmsEgp::find()->where(['type' => $key])->limit(10),
                  'sort' => ['defaultOrder' => ['pub_date' => SORT_DESC]],
                  'pagination' => false,
                ]);

                Pjax::begin(['id' => 'pjax-egp-' . $key]);
                echo ListView::widget([
                  'dataProvider' => $dataProvider,
                  'itemView' => '_egp',
                  'layout' => "{items}",
                  'emptyText' => '<div class="egp-empty-state"><i class="fa fa-folder-open"></i><br>ไม่พบข้อมูลประกาศในหมวดหมู่ที่เลือก</div>'
                ]);
                Pjax::end();
                ?>
              </div>
            <?php $i++;
            } ?>
          </div>
        </div>
      </div>

      <!-- สถ. Tab -->
      <div class="tab-pane fade" id="bookst" role="tabpanel">
        <div class="egp-content-card d-flex align-items-center justify-content-center text-center">
          <div class="egp-empty-state">
            <i class="fa fa-university"></i>
            <h3>หนังสือราชการจากกรมส่งเสริมการปกครองท้องถิ่น</h3>
            <p>อยู่ระหว่างการดึงข้อมูลจากระบบ...</p>
            <a href="http://www.dla.go.th/servlet/DocumentServlet" target="_blank" class="btn btn-primary mt-3" style="background:#8e1d1d; border:none; border-radius:30px;">
              ไปที่เว็บไซต์ สถ. <i class="fa fa-external-link-alt ml-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<!-- EGP/book -->

<!-- ข้อมูล อบต. -->
<style>
  .stats-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #8e1d1d 0%, #c62828 100%);
    position: relative;
    overflow: hidden;
    color: #fff;
  }

  /* Thai Pattern Overlay for Stats Section */
  .stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 L45 35 L60 40 L45 45 L40 80 L35 45 L20 40 L35 35 Z' fill='%23FFC068' fill-opacity='0.1'/%3E%3C/svg%3E");
    opacity: 0.4;
  }

  .stats-section .main-title h1 {
    color: #FFC068 !important;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .stats-section .main-title p {
    color: #FFDBBB !important;
    font-size: 18px;
    line-height: 1.6;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 192, 104, 0.3);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
  }

  .stat-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    border-color: #FFC068;
  }

  .stat-icon {
    width: 70px;
    height: 70px;
    background: #FFC068;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #8e1d1d;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
  }

  .stat-info h2 {
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    color: #FFC068;
    font-family: 'Barlow Condensed', sans-serif;
  }

  .stat-info p {
    margin: 0;
    font-size: 16px;
    color: #FFDBBB;
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }

    .stats-section {
      padding: 60px 0;
    }
  }
</style>

<div class="stats-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-12 align-self-center mb-5 mb-lg-0 wow fadeInLeft">
        <div class="main-title mb-0">
          <h1>ข้อมูลประชากร</h1>
          <p>
            <?= Yii::$app->params['org_name_th'] ?><br>
            <span style="font-size: 14px; opacity: 0.8; font-weight: 400;"><?= Yii::$app->params['org_name_en'] ?></span>
          </p>
          <div style="width: 80px; height: 4px; background: #FFC068; border-radius: 2px; margin-top: 20px;"></div>
        </div>
      </div>
      <div class="col-lg-7 col-md-12 wow fadeInRight">
        <div class="stats-grid">
          <!-- Villages -->
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-map-signs"></i>
            </div>
            <div class="stat-info">
              <h2 class="counter">7</h2>
              <p>จำนวนหมู่บ้าน</p>
            </div>
          </div>
          <!-- Households -->
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-home"></i>
            </div>
            <div class="stat-info">
              <h2 class="counter">842</h2>
              <p>จำนวนครัวเรือน</p>
            </div>
          </div>
          <!-- Population -->
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-users"></i>
            </div>
            <div class="stat-info">
              <h2 class="counter">2710</h2>
              <p>ประชากรรวม</p>
            </div>
          </div>
          <!-- Area -->
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa fa-area-chart"></i>
            </div>
            <div class="stat-info">
              <h2 class="counter">0</h2>
              <p>พื้นที่รวม (ไร่)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ข้อมูล อบต. -->

<!-- ท่องเที่ยว/อื่นๆ -->
<style>
  .tourism-section {
    padding: 100px 0;
    background-color: #fffaf5;
    position: relative;
    overflow: hidden;
  }

  /* Floating Thai Ornaments */
  .tour-ornament {
    position: absolute;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }

  .tour-ornament-1 {
    top: 5%;
    left: -2%;
    width: 200px;
    transform: rotate(15deg);
  }

  .tour-ornament-2 {
    bottom: 5%;
    right: -2%;
    width: 250px;
    transform: rotate(-15deg);
  }

  .tourism-wrap {
    background: #fff;
    border-radius: 40px;
    padding: 50px;
    box-shadow: 0 30px 70px rgba(44, 24, 16, 0.08);
    border: 1px solid #FFDBBB;
    position: relative;
    z-index: 1;
  }

  /* Vertical Tabs Sidebar */
  .tour-tabs-sidebar {
    border-right: 2px solid #fdf0e6;
    padding-right: 30px;
  }

  .tour-tabs-sidebar .nav-pills {
    gap: 12px;
  }

  .tour-tabs-sidebar .nav-link {
    color: #555 !important;
    background: #fdfaf5 !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    padding: 18px 25px !important;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    font-family: 'Kanit', sans-serif;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  }

  .tour-tabs-sidebar .nav-link i {
    font-size: 20px;
    color: #ff8f00;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  .tour-tabs-sidebar .nav-link.active {
    background: linear-gradient(135deg, #FFC068 0%, #ff8f00 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(255, 143, 0, 0.3);
    transform: translateX(15px);
  }

  .tour-tabs-sidebar .nav-link.active i {
    color: #ff8f00;
    transform: scale(1.1);
  }

  .tour-tabs-sidebar .nav-link:hover:not(.active) {
    border-color: #FFC068 !important;
    background: #fff !important;
    color: #ff8f00 !important;
    transform: translateX(5px);
  }

  /* Content Area */
  .tour-content-card {
    padding-left: 40px;
  }

  .tour-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    border-bottom: 3px solid #fdf0e6;
    padding-bottom: 20px;
  }

  .tour-tab-header .nav-pills .nav-link {
    background: transparent !important;
    border: none !important;
    color: #2c1810 !important;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 20px !important;
    position: relative;
    transition: all 0.3s ease;
  }

  .tour-tab-header .nav-pills .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 3px;
    background: #FFC068;
    border-radius: 2px;
  }

  .tour-tab-title {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .tour-tab-title h3 {
    margin: 0;
    font-weight: 800;
    color: #2c1810;
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  /* Category Pills for Downloads */
  .load-cat-pill {
    border: 1px solid #FFDBBB !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    padding: 12px 15px !important;
    background: #fff !important;
    color: #666 !important;
    transition: all 0.3s ease !important;
  }

  .load-cat-pill.active {
    background: #8e1d1d !important;
    color: #fff !important;
    border-color: #8e1d1d !important;
    box-shadow: 0 5px 15px rgba(142, 29, 29, 0.2);
  }

  /* Calendar & E-book special styling */
  .fc {
    font-family: 'Kanit', sans-serif;
  }

  .fc-header-toolbar {
    margin-bottom: 2em !important;
  }

  .fc-button-primary {
    background-color: #8e1d1d !important;
    border-color: #8e1d1d !important;
    border-radius: 30px !important;
    padding: 8px 20px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
  }

  @media (max-width: 991px) {
    .tour-tabs-sidebar {
      border-right: none;
      border-bottom: 2px solid #fdf0e6;
      padding-right: 0;
      padding-bottom: 30px;
      margin-bottom: 40px;
    }

    .tour-content-card {
      padding-left: 0;
    }

    .tour-tabs-sidebar .nav-link.active {
      transform: translateY(-5px);
    }
  }
</style>

<section class="tourism-section">
  <!-- Background Decor -->
  <svg class="tour-ornament tour-ornament-1" viewBox="0 0 100 100">
    <path d="M50 0 L100 50 L50 100 L0 50 Z" fill="#FFC068" />
  </svg>
  <svg class="tour-ornament tour-ornament-2" viewBox="0 0 100 100">
    <path d="M50 0 L100 50 L50 100 L0 50 Z" fill="#8e1d1d" />
  </svg>

  <div class="container-fluid px-lg-5">
    <div class="tourism-wrap wow fadeInUp" data-wow-duration="1s">
      <div class="row">
        <!-- Sidebar Tabs -->
        <div class="col-lg-3 tour-tabs-sidebar">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active wow fadeInLeft" data-wow-delay="0.1s" id="v-pills-otop-tab" data-toggle="pill" href="#v-pills-otop" role="tab" aria-selected="true">
              <i class="fa fa-shopping-basket"></i> ผลิตภัณฑ์ในตำบล
            </a>
            <a class="nav-link wow fadeInLeft" data-wow-delay="0.2s" id="v-pills-tour-tab" data-toggle="pill" href="#v-pills-tour" role="tab" aria-selected="false">
              <i class="fa fa-map-marker"></i> สถานที่สำคัญ
            </a>
            <a class="nav-link wow fadeInLeft" data-wow-delay="0.3s" id="v-pills-calendar-tab" data-toggle="pill" href="#v-pills-calendar" role="tab" aria-selected="false">
              <i class="fa fa-calendar"></i> ปฏิทินงาน
            </a>
            <a class="nav-link wow fadeInLeft" data-wow-delay="0.4s" id="v-pills-ebook-tab" data-toggle="pill" href="#v-pills-ebook" role="tab" aria-selected="false">
              <i class="fa fa-book"></i> เอกสารอิเล็กทรอนิกส์
            </a>
            <a class="nav-link wow fadeInLeft" data-wow-delay="0.5s" id="v-pills-load-tab" data-toggle="pill" href="#v-pills-load" role="tab" aria-selected="false">
              <i class="fa fa-download"></i> ดาวน์โหลดแบบฟอร์ม
            </a>
          </div>
        </div>

        <!-- Tab Content Area -->
        <div class="col-lg-9 tour-content-card">
          <div class="tab-content" id="v-pills-tabContent">

            <!-- 1. OTOP -->
            <div class="tab-pane fade show active" id="v-pills-otop" role="tabpanel">
              <div class="tour-tab-header">
                <div class="tour-tab-title wow fadeInDown">
                  <div class="p-2 bg-warning rounded-circle mr-3"><i class="fa fa-shopping-bag text-white"></i></div>
                  <h3>สินค้าและผลิตภัณฑ์ชุมชน (OTOP)</h3>
                </div>
              </div>

              <div class="wow fadeIn" data-wow-delay="0.3s">
                <?php Pjax::begin(['id' => 'pjax-product']) ?>
                <?= ListView::widget([
                  'dataProvider' => new ActiveDataProvider([
                    'query' => CmsPost::find()->where(['cms_category_id' => 35, 'status' => 1])->limit(6),
                    'sort' => [
                      'defaultOrder' => [
                        'publish_at' => SORT_DESC
                      ]
                    ],
                    'pagination' => false,
                  ]),
                  'layout' => "{items}\n<div class='col-12 mt-4'>{pager}</div>",
                  'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
                  'itemView' => '../site/_product',
                  'options' => ['class' => 'row'],
                  'itemOptions' => ['tag' => false]
                ]) ?>
                <?php Pjax::end() ?>
              </div>

              <div class="text-center mt-5">
                <?= Html::a('<i class="fa fa-th-large mr-2"></i> ผลิตภัณฑ์ทั้งหมดในตำบล', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('ผลิตภัณฑ์ในตำบลทั้งหมด'), 'id' => 35], ['class' => 'button btn-3 wow pulse infinite']) ?>
              </div>
            </div>

            <!-- 2. Important Places -->
            <div class="tab-pane fade" id="v-pills-tour" role="tabpanel">
              <div class="tour-tab-header">
                <div class="tour-tab-title">
                  <div class="p-2 bg-success rounded-circle mr-3"><i class="fa fa-camera-retro text-white"></i></div>
                  <h3>แหล่งท่องเที่ยวและสถานที่สำคัญ</h3>
                </div>
              </div>

              <div class="wow fadeIn">
                <?php Pjax::begin(['id' => 'pjax-place']) ?>
                <?= ListView::widget([
                  'dataProvider' => new ActiveDataProvider([
                    'query' => CmsPost::find()->where(['cms_category_id' => 36, 'status' => 1])->limit(6),
                    'sort' => [
                      'defaultOrder' => [
                        'publish_at' => SORT_DESC
                      ]
                    ],
                    'pagination' => false,
                  ]),
                  'layout' => "{items}\n<div class='col-12 mt-4'>{pager}</div>",
                  'pager' => ['class' => 'yii\bootstrap4\LinkPager'],
                  'itemView' => '../site/_place',
                  'options' => ['class' => 'row'],
                  'itemOptions' => ['tag' => false]
                ]) ?>
                <?php Pjax::end() ?>
              </div>

              <div class="text-center mt-5">
                <?= Html::a('<i class="fa fa-map-marker mr-2"></i> ดูสถานที่สำคัญทั้งหมด', ['/post/index', 'slug' => Yii::$app->abt->simpleSlug('แหล่งท่องเที่ยว/สถานที่สำคัญทั้งหมด'), 'id' => 36], ['class' => 'button btn-3']) ?>
              </div>
            </div>

            <!-- 3. Calendar -->
            <div class="tab-pane fade" id="v-pills-calendar" role="tabpanel">
              <div class="tour-tab-header">
                <div class="tour-tab-title">
                  <div class="p-2 bg-info rounded-circle mr-3"><i class="fa fa-calendar text-white"></i></div>
                  <h3>ปฏิทินกิจกรรมโครงการ</h3>
                </div>
              </div>
              <div class="bg-white p-4 rounded-xl border-warning shadow-sm" style="border: 2px solid #FFDBBB;">
                <?= yii2fullcalendar::widget([
                  'events' => Url::to(['/site/jsoncalendar']),
                  'options' => [
                    'header' => [
                      'left' => 'prev,next today',
                      'center' => 'title',
                      'right' => 'dayGridMonth,timerGridWeek,timerGridDay'
                    ]
                  ]
                ]) ?>
              </div>
            </div>
            <?php $this->registerCss("
              .fc-event-time,
              .fc-event-title {
                  padding: 0 1px;
                  float: left;
                  clear: none;
                  margin-right: 10px;
              }
              .fc-day-grid-event .fc-content {
                white-space: normal;
              }

              /* FullCalendar Button Styling */
              .fc-left .btn-default, 
              .fc-left .fc-today-button,
              .fc-right .btn-default {
                  background-color: #FFDBBB !important;
                  border-color: #FFC068 !important;
                  color: #2c1810 !important;
                  font-weight: 700 !important;
                  transition: all 0.3s ease;
                  text-shadow: none !important;
                  box-shadow: none !important;
              }

              .fc-left .btn-default:hover, 
              .fc-left .fc-today-button:hover,
              .fc-right .btn-default:hover,
              .fc-right .btn-default.active {
                  background-color: #FFC068 !important;
                  color: #fff !important;
                  border-color: #2c1810 !important;
              }

              .fc-left .btn-group .fc-prev-button,
              .fc-left .btn-group .fc-next-button {
                  padding: 6px 15px !important;
              }

              .fc-left .fc-today-button {
                  margin-left: 10px !important;
                  border-radius: 30px !important;
                  padding: 6px 20px !important;
                  text-transform: uppercase;
              }
              
              .fc-left .btn-group,
              .fc-right .btn-group {
                  box-shadow: 0 4px 10px rgba(255, 192, 104, 0.2);
                  border-radius: 30px;
                  overflow: hidden;
              }
            ") ?>

            <!-- 4. E-Books -->
            <div class="tab-pane fade" id="v-pills-ebook" role="tabpanel">
              <div class="tour-tab-header">
                <div class="tour-tab-title">
                  <div class="p-2 bg-danger rounded-circle mr-3"><i class="fa fa-book text-white"></i></div>
                  <h3>ห้องสมุดอิเล็กทรอนิกส์ (E-Book)</h3>
                </div>
              </div>
              <div class="row">
                <?php
                \frontend\assets\EbookAsset::register($this);
                $script = '';
                foreach (EbookCategory::find()->orderBy(['sort_order' => SORT_ASC])->all() as $category) {
                ?>
                  <div class="col-12 mb-5 wow fadeIn">
                    <h5 class="link-group-title"><i class="fa fa-bookmark mr-2 text-warning"></i> <?= $category->name ?></h5>
                    <div id="bookshelf_<?= $category->id ?>" class="bs-container shadow-sm rounded">
                      <section>
                        <?php foreach (Ebook::find()->where(['ebook_category_id' => $category->id])->limit(4)->orderBy(['id' => SORT_DESC])->all() as $book) { ?>
                          <div class="bs-shelf-image">
                            <?= Html::a(
                              Html::img(Yii::$app->params['backendUrl'] . '/uploads/ebook/cover/' . $book->cover, ['class' => 'shadow-lg']),
                              ['/ebook/view', 'id' => $book->id],
                              ['target' => '_blank']
                            ) ?>
                            <div class="bs-textbox">
                              <p class="font-weight-bold"><?= $book->name ?></p>
                            </div>
                          </div>
                        <?php } ?>
                      </section>
                    </div>
                  </div>
                <?php
                  $script .= "$('#bookshelf_" . $category->id . "').bookshelf({color:\"#8e1d1d\",width:900});";
                } ?>
                <?php $this->registerJs($script) ?>
              </div>
            </div>

            <!-- 5. Downloads -->
            <div class="tab-pane fade" id="v-pills-load" role="tabpanel">
              <div class="tour-tab-header">
                <div class="tour-tab-title">
                  <div class="p-2 bg-dark rounded-circle mr-3"><i class="fa fa-download text-white"></i></div>
                  <h3>ศูนย์ดาวน์โหลดเอกสารและแบบฟอร์ม</h3>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="nav flex-column nav-pills tour-tabs-sidebar border-0" id="load-pills-tab" role="tablist">
                    <?php
                    $i = 1;
                    $fileIcons = ['fa-file-text-o', 'fa-file-pdf-o', 'fa-file-word-o', 'fa-file-excel-o', 'fa-file-archive-o', 'fa-pencil-square-o'];
                    foreach (CmsFileCategory::find()->all() as $category) {
                      $icon = $fileIcons[($i - 1) % count($fileIcons)];
                    ?>
                      <a class="nav-link load-cat-pill <?= $i == 1 ? 'active' : '' ?> wow fadeInLeft"
                        data-wow-delay="<?= 0.1 * $i ?>s"
                        id="v-pills-tabtab<?= $category->id ?>-tab" data-toggle="pill"
                        href="#v-pills-tab<?= $category->id ?>" role="tab">
                        <i class="fa <?= $icon ?> mr-2"></i> <?= $category->name ?>
                      </a>
                    <?php $i++;
                    } ?>
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="tab-content bg-light p-4 rounded-lg shadow-inner border" id="load-pills-tabContent">
                    <?php
                    $i = 1;
                    foreach (CmsFileCategory::find()->all() as $category) {
                    ?>
                      <div class="tab-pane fade <?= $i == 1 ? ' show active' : '' ?>"
                        id="v-pills-tab<?= $category->id ?>" role="tabpanel">
                        <h5 class="mb-4 font-weight-bold text-dark border-bottom pb-2">
                          <i class="fa fa-folder-open text-warning mr-2"></i> <?= $category->name ?>
                        </h5>
                        <?php Pjax::begin(['id' => 'pjax-service-' . $i]) ?>
                        <?= ListView::widget([
                          'dataProvider' => new ActiveDataProvider([
                            'query' => CmsFile::find()->where(['cms_file_category_id' => $category->id])->limit(10),
                            'sort' => ['defaultOrder' => ['id' => SORT_DESC]],
                            'pagination' => false,
                          ]),
                          'layout' => "{items}",
                          'itemView' => '_file',
                          'options' => ['class' => 'list-group list-group-flush'],
                        ]) ?>
                        <?php Pjax::end() ?>
                      </div>
                    <?php $i++;
                    } ?>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ท่องเที่ยว/อื่นๆ -->

<!-- บุคลากร -->
<div class="agent-section content-area-17 comon-slick section-bg9">
  <div class="container">
    <!-- Main title -->
    <div class="main-title">
      <?= Html::img(Yii::getAlias('@web') . '/img/title/person.png', ['class' => 'h1 img-fluid rounded', 'width' => 360]) ?>
    </div>
    <div class="slick row comon-slick-inner"
      data-slick='{"slidesToShow": 4, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
      <div class="item slide-box wow fadeInLeft delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 2]) ?>">หัวหน้าส่วนราชการ</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 2]) ?>">หัวหน้าส่วนราชการ</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInLeft delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 4]) ?>" target="_blank">สำนักปลัด</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 4]) ?>" target="_blank">สำนักปลัด</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInLeft delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 5]) ?>" target="_blank">กองคลัง</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 5]) ?>" target="_blank">กองคลัง</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInLeft delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 6]) ?>" target="_blank">กองช่าง</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 6]) ?>" target="_blank">กองช่าง</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInLeft delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 7]) ?>" target="_blank">กองการศึกษา
                  ศาสนา และวัฒนธรรม</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 7]) ?>" target="_blank">กองการศึกษา
                  ศาสนา และวัฒนธรรม</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInRight delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 1]) ?>"
                  target="_blank">คณะผู้บริหาร</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 1]) ?>"
                  target="_blank">คณะผู้บริหาร</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="item slide-box wow fadeInRight delay-04s">
        <div class="agent-1">
          <div class="member-thumb">
            <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
          </div>
          <div class="member-content-wrap">
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 3]) ?>" target="_blank">สภาตำบล</a>
              </h4>
            </div>
          </div>
          <div class="team-hover-content">
            <div class="member-thumb">
              <?= Html::img(Yii::getAlias('@web') . '/img/borad.png', ['class' => 'img-fluid w-100']) ?>
            </div>
            <div class="member-name-designation">
              <h4 class="member-name">
                <a href="<?= Url::to(['personnel/index', 'id' => 3]) ?>" target="_blank">สภาตำบล</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- บุคลากร -->

<!-- แบนเนอร์ / ลิงก์ที่เกี่ยวข้อง -->
<style>
  .partners-section {
    padding: 80px 0;
    background-color: #fdfaf5;
    position: relative;
  }

  .partners-section .main-title {
    margin-bottom: 50px;
    text-align: center;
  }

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

  .link-group-title {
    color: #8e1d1d !important;
    /* Thai Deep Red */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid #FFC068;
    font-family: 'Kanit', sans-serif;
  }

  .link-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .link-list li {
    margin-bottom: 10px;
  }

  .link-list li a {
    color: #555 !important;
    font-size: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
  }

  .link-list li a::before {
    content: '\f105';
    /* FontAwesome Angle Right */
    font-family: 'FontAwesome';
    color: #FFC068;
    font-size: 12px;
  }

  .link-list li a:hover {
    color: #FFC068 !important;
    padding-left: 5px;
  }

  .external-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    justify-items: center;
    padding: 20px;
    background: rgba(255, 219, 187, 0.1);
    border-radius: 20px;
    border: 1px dashed #FFDBBB;
  }

  .external-banner-grid a {
    transition: all 0.3s ease;
    display: block;
    filter: grayscale(0.2);
  }

  .external-banner-grid a:hover {
    transform: scale(1.05);
    filter: grayscale(0);
  }

  .external-banner-grid img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
</style>

<div class="partners-section">
  <div class="container-fluid px-lg-5">
    <div class="main-title">
      <?= Html::img(Yii::getAlias('@web') . '/img/title/link.png', ['class' => 'img-fluid', 'width' => 320]) ?>
    </div>

    <div class="link-card-wrap">
      <div class="row">
        <div class="col-lg-3 col-md-6 mb-4">
          <h5 class="link-group-title">เว็บไซต์ที่เกี่ยวข้อง</h5>
          <ul class="link-list">
            <li><a target="_blank" href="http://www.thaigov.go.th">รัฐบาลไทย</a></li>
            <li><a target="_blank" href="http://www.moi.go.th">กระทรวงมหาดไทย</a></li>
            <li><a target="_blank" href="https://dopa.go.th/">กรมการปกครอง</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/">กรมส่งเสริมการปกครองฯ</a></li>
            <li><a target="_blank" href="http://www.cdd.go.th/">กรมการพัฒนาชุมชน</a></li>
            <li><a target="_blank" href="http://www.dpt.go.th/">กรมโยธาธิการและผังเมือง</a></li>
            <li><a target="_blank" href="http://www.doh.go.th">กรมทางหลวง</a></li>
            <li><a target="_blank" href="http://www.rid.go.th">กรมชลประทาน</a></li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
          <h5 class="link-group-title">ข้อมูลสารสนเทศ</h5>
          <ul class="link-list">
            <li><a target="_blank" href="http://info.dla.go.th/">ระบบข้อมูลกลาง อปท.</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/work/2559/LPA/index.jsp">การประเมินประสิทธิภาพ LPA</a></li>
            <li><a target="_blank" href="http://ereport.dla.go.th/teacher.jsp">ข้อมูลผู้ดูแลเด็ก</a></li>
            <li><a target="_blank" href="http://ltax3000.dla.go.th/download.html">ดาวน์โหลดแผนที่ภาษี</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/work/money/index.jsp">การเงินการคลังท้องถิ่น</a></li>
            <li><a target="_blank" href="http://sis.dla.go.th/gpa.jsp">จัดการผลการเรียนเฉลี่ย</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/servlet/DocumentServlet">หนังสือราชการจาก สถ.</a></li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
          <h5 class="link-group-title">ระบบสารสนเทศ</h5>
          <ul class="link-list">
            <li><a target="_blank" href="http://sarabun.dla.go.th/">ระบบสารบรรณ</a></li>
            <li><a target="_blank" href="http://ereport.dla.go.th/">แบบฟอร์มอิเล็กทรอนิกส์</a></li>
            <li><a target="_blank" href="http://e-plan.dla.go.th/">ระบบสารสนเทศเพื่อการวางแผน</a></li>
            <li><a target="_blank" href="http://welfare.dla.go.th/">ระบบเบี้ยยังชีพ</a></li>
            <li><a target="_blank" href="http://ccis.dla.go.th/">ระบบศูนย์พัฒนาเด็กเล็ก</a></li>
            <li><a target="_blank" href="http://www.laas.go.th/">ระบบบันทึกบัญชีท้องถิ่น</a></li>
            <li><a target="_blank" href="http://lhr.dla.go.th/hr/">ระบบข้อมูลบุคลากร</a></li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6 mb-4">
          <h5 class="link-group-title">ลิงก์ที่น่าสนใจ</h5>
          <ul class="link-list">
            <li><a target="_blank" href="http://asean.dla.go.th/">ศูนย์การเรียนรู้อาเซียน</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/servlet/TemplateOrganizeServlet?organize=quality&amp;_mode=menu&amp;tempWebMenuId=3261">คู่มือสำหรับประชาชน</a></li>
            <li><a target="_blank" href="http://info.dla.go.th/travel/main.do">ท้องถิ่นไทยหัวใจพอเพียง</a></li>
            <li><a target="_blank" href="http://www.dla.go.th/servlet/ServiceServlet">ศูนย์บริการข้อมูลข่าวสาร</a></li>
            <li><a target="_blank" href="http://info.dla.go.th/travel/">สถ. ชวนเที่ยว</a></li>
            <li><a target="_blank" href="http://www.oic.go.th/ginfo/">ฐานข้อมูลหน่วยงานของรัฐ</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="external-banner-grid">
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/banner_local2.jpg'), 'http://www.localsociety.org/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/bb01.jpg'), 'http://www.bb.go.th/bbhome/index.asp', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/bc.jpg'), 'http://www.cgd.go.th/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/bnn12.jpg'), 'http://thai.tourismthailand.org/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/ginfo.jpg'), 'http://www.oic.thaigov.go.th/ginfo/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/kkt.jpg'), 'http://www.ect.go.th/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/law.jpg'), 'http://www.krisdika.go.th/lawChar.jsp?head=3&item=3&process=displayLawList&id=1', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/mict.jpg'), 'http://www.mict.go.th/main.php?filename=index', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/ppch.jpg'), 'http://www.nccc.thaigov.net/nccc/1.php', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/pricem.jpg'), 'http://www.dit.go.th/pricemain2.asp', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/sahakorn.jpg'), 'http://www.savingcoop.com/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/sml.jpg'), 'http://www.dopa.go.th/sml/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/stng.jpg'), 'http://www.oag.go.th/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/tac.jpg'), 'http://www.admincourt.go.th/amc_tha.html', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/yota.jpg'), 'http://www.yotathai.net/', ['target' => '_blank']) ?>
      <?= Html::a(Html::img(Yii::getAlias('@web') . '/img/banner/lpa.png'), 'http://203.151.233.115/', ['target' => '_blank']) ?>
    </div>
  </div>
</div>
<!-- แบนเนอร์ -->