<!doctype html>
<html lang="en">
  <head>
    {{template "backend_head" .}}
  </head>
  <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
    <div class="app-wrapper">
      {{template "backend_header" .}}
      {{template "backend_menu" .}}
      <main class="app-main">
        <div class="app-content-header">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6"><h3 class="mb-0">ข่าวประชาสัมพันธ์</h3></div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="main">หน้าหลัก</a></li>
                  <li class="breadcrumb-item active" aria-current="page">ข่าวประชาสัมพันธ์</li>
                </ol>
              </div>
            </div>
          </div>
        </div>

        <div class="app-content">
          <div class="container-fluid">
            <div class="row">

              <!-- เปิด ตารางแสดงข้อมูลข่าว -->
              <div class="col-md-12">
                <div class="card mb-4">
                  <div class="card-body">
                    <div class="d-flex justify-content-end mb-3">
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addNewsModal">
                        <i class="bi bi-plus-circle"></i> เพิ่มข่าวประชาสัมพันธ์
                      </button>
                    </div>
                    <table id="table_theme" class="table table-bordered table-hover table-striped w-100">
                      <thead style="white-space: nowrap">
                        <tr class="align-middle bg-light">
                          <th style="text-align: center;">ลำดับ</th>
                          <th style="text-align: center;">สถานะ</th>
                          <th style="text-align: center;">รายละเอียด</th>
                          <th style="text-align: center;">กลุ่มข่าว</th>
                          <th style="text-align: center;">ประเภท</th>
                          <th style="text-align: center;">หัวข้อข่าว</th>
                          <!-- <th style="text-align: center;">หัวข้อข่าวย่อย</th> -->
                          <th style="text-align: center;">วันที่ / เวลา</th>
                          <th style="text-align: center;">บันทึกโดย</th>
                          <th style="text-align: center;">จัดการ</th>
                        </tr>
                      </thead>
                      <tbody style="white-space: nowrap">
                        {{if .Promotions}}
                          {{range .Promotions}}
                          <tr class="align-middle">
                            <td class="text-center"></td>
                            <td class="text-center">
                              {{if or (eq .PN_STATUSCLOSE "P") (eq .PN_STATUSCLOSE "O")}}
                              <button class="btn btn-outline-success toggle-status" data-id="{{.PN_ID}}" data-status="{{.PN_STATUSCLOSE}}">เปิดใช้งาน</button>
                              {{else}}
                              <button class="btn btn-outline-danger toggle-status" data-id="{{.PN_ID}}" data-status="{{.PN_STATUSCLOSE}}">ปิดใช้งาน</button>
                              {{end}}
                             </td>
                             <td class="text-center"> 
                               <button class="btn btn-outline-primary view-detail" 
                                 data-id="{{.PN_ID}}"
                                 data-name="{{.PN_NAME}}"
                                 data-detail="{{.PN_DETAIL}}"
                                 data-img1="{{.PN_IMG_1}}"
                                 data-img2="{{.PN_IMG_2}}"
                                 data-img3="{{.PN_IMG_3}}"
                                 data-img4="{{.PN_IMG_4}}"
                                 data-adetail1="{{.PN_ALLDETAIL_1}}"
                                 data-adetail2="{{.PN_ALLDETAIL_2}}"
                                 data-adetail3="{{.PN_ALLDETAIL_3}}"
                                 data-adetail4="{{.PN_ALLDETAIL_4}}"
                                 data-group="{{.PNS_STATUSNAME}}"
                                 data-type="{{.PNT_TYPENAME}}"
                                 data-date="{{.PN_DATE}}"
                                 data-time="{{.PN_TIME}}"
                                  data-author="{{.US_NAME}} {{.FNAME}}"
                                  data-editor="{{.US_NAMEEDIT}}"
                                  data-date-edit="{{.PN_DATEEDIT}}"
                                  data-time-edit="{{.PN_TIMEEDIT}}"
                               >ดูรายละเอียด</button> 
                             </td>
                             <td class="">{{.PNS_STATUSNAME}}</td>
                             <td class="">{{.PNT_TYPENAME}}</td>
                             <td>{{.PN_NAME}}</td>
                             <!-- <td>{{.PN_DETAIL}}</td> -->
                            <td>วันที่ {{.PN_DATE}} เวลา {{.PN_TIME}}</td>
                            <td>{{.US_NAME}} {{.FNAME}}</td>
                             <td class="text-center">
                               <button class="btn btn-outline-secondary edit-news" 
                                  data-id="{{.PN_ID}}"
                                  data-name="{{.PN_NAME}}"
                                  data-detail="{{.PN_DETAIL}}"
                                  data-img1="{{.PN_IMG_1}}"
                                  data-img2="{{.PN_IMG_2}}"
                                  data-img3="{{.PN_IMG_3}}"
                                  data-img4="{{.PN_IMG_4}}"
                                  data-adetail1="{{.PN_ALLDETAIL_1}}"
                                  data-adetail2="{{.PN_ALLDETAIL_2}}"
                                  data-adetail3="{{.PN_ALLDETAIL_3}}"
                                  data-adetail4="{{.PN_ALLDETAIL_4}}"
                                   data-status="{{.PN_STATUS}}"
                                   data-type="{{.PN_TYPE}}"
                                   data-editor="{{.US_NAMEEDIT}}"
                                   data-date-edit="{{.PN_DATEEDIT}}"
                                   data-time-edit="{{.PN_TIMEEDIT}}"
                                ><i class="bi bi-pencil-square"></i> แก้ไขข้อมูล </button>
                               <button class="btn btn-outline-danger delete-news" data-id="{{.PN_ID}}"><i class="bi bi-trash"></i> ลบข้อมูล </button>
                             </td>
                          </tr>
                          {{end}}
                        {{else}}
                          <tr>
                            <td colspan="9" class="text-center text-muted py-4">ยังไม่มีข้อมูลข่าวประชาสัมพันธ์</td>
                          </tr>
                        {{end}}
                      </tbody>
                    </table>
                </div>
              </div>
              </div>
              <!-- ปิด ตารางแสดงข้อมูลโปรโมชั่น -->

            </div>
          </div>
        </div>
        
      </main>

      <!-- Modal สำหรับเพิ่มข่าวประชาสัมพันธ์ -->
      <div class="modal fade" id="addNewsModal" tabindex="-1" aria-labelledby="addNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header bg-success text-white" style="background: var(--luxury-deep) !important; color: white;">
              <h5 class="modal-title fw-bold" id="addNewsModalLabel"><i class="bi bi-plus-circle"></i> เพิ่มข่าวประชาสัมพันธ์</h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="promotionForm" enctype="multipart/form-data">
              <div class="modal-body">
                <div class="row">
                  <div class="mb-3 col-md-6">
                    <label for="pnStatus" class="form-label fw-bold">กลุ่มข่าว</label>
                    <select id="pnStatus" name="PN_STATUS" class="form-select" required>
                      <option value="">เลือกกลุ่มข่าว</option>
                      {{range .NewsGroups}}
                      <option value="{{.PNS_STATUS}}">{{.PNS_STATUSNAME}}</option>
                      {{end}}
                    </select>
                  </div>
                  <div class="mb-3 col-md-6">
                    <label for="pnType" class="form-label fw-bold">ประเภทข่าว</label>
                    <select id="pnType" name="PN_TYPE" class="form-select" required>
                      <option value="">เลือกประเภทข่าว</option>
                      {{range .NewsTypes}}
                      <option value="{{.PNT_TYPE}}">{{.PNT_TYPENAME}}</option>
                      {{end}}
                    </select>
                  </div>
                </div>
              
                <div class="row">
                  <div class="mb-3 col-md-4">
                    <label class="form-label fw-bold">หัวข้อข่าว</label>
                    <input type="text" class="form-control" name="PN_NAME" required>
                  </div>
                  <div class="mb-3 col-md-8">
                    <label class="form-label fw-bold">หัวข้อข่าวย่อย</label>
                    <input type="text" class="form-control" name="PN_DETAIL">
                  </div>
                </div>

                <hr>
                <h6 class="fw-bold mb-3"><i class="bi bi-card-text"></i> เนื้อหาและรูปภาพ</h6>

                <div class="row">
                  <div class="mb-3 col-md-6">
                    <label class="form-label">เนื้อหาข่าว ส่วนที่ 1</label>
                    <textarea class="form-control" name="PN_ALLDETAIL_1" rows="3"></textarea>
                  </div>
                  <div class="mb-3 col-md-6">
                    <label class="form-label">เนื้อหาข่าว ส่วนที่ 2</label>
                    <textarea class="form-control" name="PN_ALLDETAIL_2" rows="3"></textarea>
                  </div>
                  <div class="mb-3 col-md-6">
                    <label class="form-label">เนื้อหาข่าว ส่วนที่ 3</label>
                    <textarea class="form-control" name="PN_ALLDETAIL_3" rows="3"></textarea>
                  </div>
                  <div class="mb-3 col-md-6">
                    <label class="form-label">เนื้อหาข่าว ส่วนที่ 4</label>
                    <textarea class="form-control" name="PN_ALLDETAIL_4" rows="3"></textarea>
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label fw-bold">อัพโหลดรูปภาพ (สูงสุด 4 รูป)</label>
                  <input type="file" class="form-control" id="pnImages" name="PN_IMAGES" multiple required>
                  <div class="form-text text-muted">กด Ctrl หรือ Shift ค้างไว้เพื่อเลือกภาพได้มากกว่า 1 รูป</div>
                </div>
                <div id="imagePreview" class="row g-2 mb-3"></div>

                <input type="hidden" name="US_NAME" value="{{.User.UserName}}">
                <input type="hidden" id="pnDate" name="PN_DATE">
                <input type="hidden" id="pnTime" name="PN_TIME">
                <input type="hidden" name="PN_STATUSCLOSE" value="O">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">ยกเลิก</button>
                <button type="submit" class="btn btn-success">บันทึกข้อมูล</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- Modal สำหรับดูรายละเอียดข่าว -->
      <div class="modal fade" id="newsDetailModal" tabindex="-1" aria-labelledby="newsDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header" style="background: var(--luxury-deep) !important; color: white;">
              <h5 class="modal-title fw-bold" id="newsDetailModalLabel">รายละเอียดข่าวประชาสัมพันธ์</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="row mb-3">
                <div class="col-md-12">
                  <h4 id="modalNewsTitle" class="text-primary fw-bold"></h4>
                  <p id="modalNewsSubTitle" class="text-muted"></p>
                </div>
              </div>
              
              <div class="row mb-4">
                <div class="col-md-6 border-end">
                  <p><strong>กลุ่มข่าว:</strong> <span id="modalNewsGroup"></span></p>
                  <p><strong>ประเภท:</strong> <span id="modalNewsType"></span></p>
                </div>
                <div class="col-md-6 p-s-3">
                  <p><strong>วันที่/เวลา:</strong> <span id="modalNewsDateTime"></span></p>
                  <p><strong>บันทึกโดย:</strong> <span id="modalNewsAuthor"></span></p>
                  <p class="small text-muted"><strong>แก้ไขล่าสุดโดย:</strong> <span id="modalNewsEditor"></span> (<span id="modalNewsEditDateTime"></span>)</p>
                </div>
              </div>

              <div class="row">
                <div class="col-12"><h6 class="fw-bold border-bottom pb-2 mb-3">รูปภาพและเนื้อหาข่าว</h6></div>
                
                <!-- Section 1 -->
                <div class="col-md-6 mb-4 detail-section" id="section1">
                  <div class="card h-100 shadow-sm">
                    <img src="" id="modalImg1" class="card-img-top preview-img" style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                      <p class="card-text tiny-scroll" id="modalDetail1" style="max-height: 100px; overflow-y: auto; font-size: 0.9rem;"></p>
                    </div>
                  </div>
                </div>

                <!-- Section 2 -->
                <div class="col-md-6 mb-4 detail-section" id="section2">
                  <div class="card h-100 shadow-sm">
                    <img src="" id="modalImg2" class="card-img-top preview-img" style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                      <p class="card-text tiny-scroll" id="modalDetail2" style="max-height: 100px; overflow-y: auto; font-size: 0.9rem;"></p>
                    </div>
                  </div>
                </div>

                <!-- Section 3 -->
                <div class="col-md-6 mb-4 detail-section" id="section3">
                  <div class="card h-100 shadow-sm">
                    <img src="" id="modalImg3" class="card-img-top preview-img" style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                      <p class="card-text tiny-scroll" id="modalDetail3" style="max-height: 100px; overflow-y: auto; font-size: 0.9rem;"></p>
                    </div>
                  </div>
                </div>

                <!-- Section 4 -->
                <div class="col-md-6 mb-4 detail-section" id="section4">
                  <div class="card h-100 shadow-sm">
                    <img src="" id="modalImg4" class="card-img-top preview-img" style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                      <p class="card-text tiny-scroll" id="modalDetail4" style="max-height: 100px; overflow-y: auto; font-size: 0.9rem;"></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">ปิดหน้าต่าง</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal สำหรับแก้ไขข่าวประชาสัมพันธ์ -->
      <div class="modal fade" id="editNewsModal" tabindex="-1" aria-labelledby="editNewsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
          <div class="modal-content" >
            <form id="editNewsForm" enctype="multipart/form-data">
              <div class="modal-header bg-warning" style="background: var(--luxury-deep) !important; color: white;">
                <h5 class="modal-title fw-bold" id="editNewsModalLabel">แก้ไขข่าวประชาสัมพันธ์</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <input type="hidden" id="editPnId" name="PN_ID">  
                <input type="hidden" class="form-control form-control-sm" name="US_NAMEEDIT" value="{{.User.UserName}}">
                <input type="hidden" class="form-control form-control-sm" id="editPnDateEdit" name="PN_DATEEDIT">
                <input type="hidden" class="form-control form-control-sm" id="editPnTimeEdit" name="PN_TIMEEDIT">

                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">หัวข้อข่าวหลัก</label>
                    <input type="text" class="form-control" id="editPnName" name="PN_NAME" required>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">หัวข้อข่าวย่อย</label>
                    <input type="text" class="form-control" id="editPnDetail" name="PN_DETAIL">
                  </div>
                  
                  <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">กลุ่มข่าว</label>
                    <select class="form-select" id="editPnStatus" name="PN_STATUS">
                      {{range .NewsGroups}}
                      <option value="{{.PNS_STATUS}}">{{.PNS_STATUSNAME}}</option>
                      {{end}}
                    </select>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">ประเภท</label>
                    <select class="form-select" id="editPnType" name="PN_TYPE">
                      {{range .NewsTypes}}
                      <option value="{{.PNT_TYPE}}">{{.PNT_TYPENAME}}</option>
                      {{end}}
                    </select>
                  </div>
                </div>

                <hr>
                <h6 class="fw-bold mb-3"><i class="bi bi-images"></i> รูปภาพและรายละเอียดเนื้อหาข่าว (ปรับปรุง)</h6>
                
                <div class="row">
                  <!-- Section 1 -->
                  <div class="col-md-6 mb-4">
                    <div class="card p-3 shadow-sm" style="border-left: 5px solid #ffc107;">
                      <label class="form-label fw-bold">ส่วนที่ 1</label>
                      <div class="mb-2 text-center">
                        <img src="" id="editImg1Preview" class="img-thumbnail" style="max-height: 120px; display: none;">
                      </div>
                      <input type="file" class="form-control mb-2" name="PN_IMG_1" onchange="previewImage(this, 'editImg1Preview')">
                      <textarea class="form-control" name="PN_ALLDETAIL_1" id="editAdetail1" rows="5" placeholder="เนื้อหาข่าวส่วนที่ 1..."></textarea>
                    </div>
                  </div>

                  <!-- Section 2 -->
                  <div class="col-md-6 mb-4">
                    <div class="card p-3 shadow-sm" style="border-left: 5px solid #0dcaf0;">
                      <label class="form-label fw-bold">ส่วนที่ 2</label>
                      <div class="mb-2 text-center">
                        <img src="" id="editImg2Preview" class="img-thumbnail" style="max-height: 120px; display: none;">
                      </div>
                      <input type="file" class="form-control mb-2" name="PN_IMG_2" onchange="previewImage(this, 'editImg2Preview')">
                      <textarea class="form-control" name="PN_ALLDETAIL_2" id="editAdetail2" rows="5" placeholder="เนื้อหาข่าวส่วนที่ 2..."></textarea>
                    </div>
                  </div>

                  <!-- Section 3 -->
                  <div class="col-md-6 mb-4">
                    <div class="card p-3 shadow-sm" style="border-left: 5px solid #198754;">
                      <label class="form-label fw-bold">ส่วนที่ 3</label>
                      <div class="mb-2 text-center">
                        <img src="" id="editImg3Preview" class="img-thumbnail" style="max-height: 120px; display: none;">
                      </div>
                      <input type="file" class="form-control mb-2" name="PN_IMG_3" onchange="previewImage(this, 'editImg3Preview')">
                      <textarea class="form-control" name="PN_ALLDETAIL_3" id="editAdetail3" rows="5" placeholder="เนื้อหาข่าวส่วนที่ 3..."></textarea>
                    </div>
                  </div>

                  <!-- Section 4 -->
                  <div class="col-md-6 mb-4">
                    <div class="card p-3 shadow-sm" style="border-left: 5px solid #0d6efd;">
                      <label class="form-label fw-bold">ส่วนที่ 4</label>
                      <div class="mb-2 text-center">
                        <img src="" id="editImg4Preview" class="img-thumbnail" style="max-height: 120px; display: none;">
                      </div>
                      <input type="file" class="form-control mb-2" name="PN_IMG_4" onchange="previewImage(this, 'editImg4Preview')">
                      <textarea class="form-control" name="PN_ALLDETAIL_4" id="editAdetail4" rows="5" placeholder="เนื้อหาข่าวส่วนที่ 4..."></textarea>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">ยกเลิก</button>
                <button type="submit" class="btn btn-success fw-bold">บันทึกการแก้ไข</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <style>
        .preview-img { cursor: pointer; transition: 0.3s; }
        .preview-img:hover { opacity: 0.8; }
        .tiny-scroll::-webkit-scrollbar { width: 4px; }
        .tiny-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
        .tiny-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
        .detail-section { display: none; }
      </style>
      </main>
      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>
    {{template "backend_js" .}}
    {{template "datatable_code" .}}

  </body>
</html>

<!-- อัพโหลดข่าว -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Set current date and time
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  document.getElementById('pnDate').value = `${year}-${month}-${day}`;
  
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  document.getElementById('pnTime').value = `${hours}:${minutes}`;

  // Preview and Validate images (Limit to 4)
  const imageInput = document.getElementById('pnImages');
  const imagePreview = document.getElementById('imagePreview');
  
  imageInput.addEventListener('change', function() {
    imagePreview.innerHTML = '';
    if (this.files) {
      if (this.files.length > 4) {
        alert('สามารถเลือกรูปภาพได้สูงสุด 4 รูปเท่านั้นครับ');
        this.value = '';
        return;
      }

      Array.from(this.files).forEach((file, idx) => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const col = document.createElement('div');
          col.className = 'col-md-3';
          col.innerHTML = `
            <div class="card h-100">
              <img src="${e.target.result}" class="card-img-top" style="height: 120px; object-fit: cover;">
              <div class="card-footer p-1 text-center bg-light">
                <small class="text-truncate d-block fw-bold">รูปที่ ${idx + 1}</small>
                <small class="text-muted d-block" style="font-size: 10px;">${file.name}</small>
              </div>
            </div>
          `;
          imagePreview.appendChild(col);
        }
        reader.readAsDataURL(file);
      });
    }
  });

  // Handle news form submission
  const form = document.getElementById('promotionForm'); // Consider renaming ID to newsForm later
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (imageInput.files.length > 4) {
      alert('กรุณาเลือกรูปภาพไม่เกิน 4 รูปครับ');
      return;
    }

    const formData = new FormData(form);
    
    fetch('/api/news/save', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert(data.message || 'บันทึกข่าวเรียบร้อยแล้ว');
        window.location.reload();
      } else {
        alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถบันทึกข้อมูลข่าวได้'));
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
    });
  });

  // Toggle status เปิด/ปิด
  $(document).on('click', '.toggle-status', function(e) {
    const btn = $(this);
    const id = btn.data('id');
    const currentStatus = btn.data('status');
    const isOpen = (currentStatus === 'P' || currentStatus === 'O');
    const newStatus = isOpen ? 'C' : 'O';
    const actionText = isOpen ? 'ปิดใช้งาน' : 'เปิดใช้งาน';

    if (!confirm(`ยืนยันการ${actionText}ข่าวนี้?`)) return;

    fetch('/api/promotion/toggle-status', { // Reusing promotion toggle endpoint as requested/implied
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: parseInt(id), status: newStatus })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        btn.data('status', newStatus);
        if (newStatus === 'O') {
          btn.text('เปิดใช้งาน').removeClass('btn-outline-danger').addClass('btn-outline-success');
        } else {
          btn.text('ปิดใช้งาน').removeClass('btn-outline-success').addClass('btn-outline-danger');
        }
        alert(`${actionText}ข่าวเรียบร้อย`);
      } else {
        alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถเปลี่ยนสถานะได้'));
      }
    })
    .catch(() => alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'));
  });

  // ลบข่าว
  $(document).on('click', '.delete-news', function(e) {
    const btn = $(this);
    const id = btn.data('id');
    if (!confirm('ยืนยันการลบข่าวนี้? การกระทำนี้ไม่สามารถย้อนกลับได้')) return;

    fetch('/api/promotion/delete', { // Reusing promotion delete endpoint
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: parseInt(id) })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        alert('ลบข้อมูลข่าวเรียบร้อยแล้ว');
        window.location.reload();
      } else {
        alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถลบข้อมูลได้'));
      }
    })
    .catch(() => alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'));
  });

  // ดูรายละเอียดข่าว (Modal)
  $(document).on('click', '.view-detail', function() {
    const btn = $(this);
    const data = btn.data();

    $('#modalNewsTitle').text(data.name || '-');
    $('#modalNewsSubTitle').text(data.detail || '-');
    $('#modalNewsGroup').text(data.group || '-');
    $('#modalNewsType').text(data.type || '-');
    $('#modalNewsDateTime').text(`วันที่ ${data.date} เวลา ${data.time}`);
    $('#modalNewsAuthor').text(data.author || '-');
    
    const editor = data.editor || '-';
    const dateEdit = data.dateEdit || '';
    const timeEdit = data.timeEdit || '';
    $('#modalNewsEditor').text(editor);
    $('#modalNewsEditDateTime').text(dateEdit && timeEdit ? `วันที่ ${dateEdit} เวลา ${timeEdit}` : '-');


    // Reset and Fill sections
    $('.detail-section').hide();

    for(let i=1; i<=4; i++) {
        const img = data['img' + i];
        const detail = data['adetail' + i];
        
        if(img || detail) {
            $(`#section${i}`).show();
            if(img) {
                $(`#modalImg${i}`).attr('src', '/images/news/' + img).show();
            } else {
                $(`#modalImg${i}`).attr('src', '').hide();
            }
            $(`#modalDetail${i}`).text(detail || '-');
        }
    }

    const myModal = new bootstrap.Modal(document.getElementById('newsDetailModal'));
    myModal.show();
  });

  // Helper function for previewing images in the edit modal
  window.previewImage = function(input, previewId) {
    const preview = document.getElementById(previewId);
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = function(e) {
        preview.src = e.target.result;
        $(preview).show();
      }
      reader.readAsDataURL(input.files[0]);
    }
  };

  // แก้ไขข่าว (เปิด Modal และเติมข้อมูล)
  $(document).on('click', '.edit-news', function() {
    const btn = $(this);
    const data = btn.data();

    const dateEdit = data['date-edit'] || '';
    const timeEdit = data['time-edit'] || '';
    const editor = data.editor || '{{.User.UserName}}';

    $('#editPnId').val(data.id);
    $('#editPnName').val(data.name);
    $('#editPnDetail').val(data.detail);
    $('#editPnStatus').val(data.status);
    $('#editPnType').val(data.type);
    $('#editAdetail1').val(data.adetail1);
    $('#editAdetail2').val(data.adetail2);
    $('#editAdetail3').val(data.adetail3);
    $('#editAdetail4').val(data.adetail4);
    
    // ตั้งค่าวันเวลาที่กำลังแก้ไขปัจจุบัน
    const editNow = new Date();
    const editYear = editNow.getFullYear();
    const editMonth = String(editNow.getMonth() + 1).padStart(2, '0');
    const editDay = String(editNow.getDate()).padStart(2, '0');
    const editHours = String(editNow.getHours()).padStart(2, '0');
    const editMinutes = String(editNow.getMinutes()).padStart(2, '0');

    $('#editPnDateEdit').val(`${editYear}-${editMonth}-${editDay}`);
    $('#editPnTimeEdit').val(`${editHours}:${editMinutes}`);
    $('input[name="US_NAMEEDIT"]').val('{{.User.UserName}}');

    // เติมพรีวิวรูปภาพ
    for(let i=1; i<=4; i++) {
        const img = data[`img${i}`];
        const previewId = `#editImg${i}Preview`;
        if(img) {
            $(previewId).attr('src', '/images/news/' + img).show();
        } else {
            $(previewId).attr('src', '').hide();
        }
        // ล้างค่า file input เสมอเมื่อเปิด
        $(`input[name="PN_IMG_${i}"]`).val('');
    }

    const editMod = new bootstrap.Modal(document.getElementById('editNewsModal'));
    editMod.show();
  });

  // ส่งข้อมูลแก้ไขข่าว
  $('#editNewsForm').on('submit', function(e) {
    e.preventDefault();
    
    
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    document.getElementById('editPnTimeEdit').value = `${hours}:${minutes}`;

    const formData = new FormData(this);

    fetch('/api/news/update', {
      method: 'POST',
      body: formData
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        alert('แก้ไขข้อมูลข่าวเรียบร้อยแล้ว');
        window.location.reload();
      } else {
        alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถแก้ไขข้อมูลได้'));
      }
    })
    .catch(() => alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'));
  });

});
</script>


