<!doctype html>
<html lang="en">
  <head>
    {{template "backend_head" .}}
    <style>
      /* รูปภาพโปรโมชั่น – กำหนดขนาดตั้งแต่แรกเพื่อป้องกันการกระตุกขณะโหลด */
      .pd-image-container { position: relative; width: 70px; margin: 0 auto; transition: all 0.3s; }
      .pd-img-preview { width: 60px; height: auto; border-radius: 6px; border: 1px solid #dee2e6; display: block; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
      .no-pd-img { width: 70px; height: 50px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #adb5bd; font-weight: 500; }
      /* Edit Mode */
      .edit-mode .pd-image-container { border: 2px dashed #007bff; border-radius: 8px; padding: 4px; background: rgba(0,123,255,0.05); width: 85px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
      .drop-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,123,255,0.8); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 10; pointer-events: none; border-radius: 4px; }
      .drag-over .drop-overlay { display: flex !important; }
    </style>
  </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-header">
                    <h3 class="card-title">ตารางจัดการข้อมูลโปรโมชั่น</h3>
                  </div>
                  <div class="card-body">
                    <div class="d-flex justify-content-end gap-2 mb-3">
                      <button type="button" class="btn btn-outline-primary" id="btn_toggle_edit_mode">
                        <i class="bi bi-image"></i> โหมดจัดการรูปภาพ: <span id="edit_mode_status">ปิด</span>
                      </button>
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPromotionModal">
                        <i class="bi bi-plus-circle"></i> เพิ่มโปรโมชั่น
                      </button>
                    </div>
                    <div id="bulkActionArea" class="mb-3" style="display: none;">
                      <button id="btnBulkDelete" class="btn btn-danger">
                        <i class="bi bi-trash-fill"></i> ลบรายการที่เลือก (<span id="selectedCount">0</span> รายการ)
                      </button>
                    </div>
                    <table id="table_promotion" class="table table-bordered table-hover table-striped w-100">
                      <thead style="white-space: nowrap">
                        <tr class="align-middle bg-light">
                          <th style="width:40px; text-align:center;">เลือก <input type="checkbox" id="selectAll"></th>
                          <th style="width:50px; text-align:center;">ลำดับ</th>
                          <th class="text-center">สถานะ</th>
                          <th class="text-center">รูปภาพ</th>
                          <th class="text-center">หัวข้อโปรโมชั่น</th>
                          <th class="text-center">วันที่ / เวลา</th>
                          <th class="text-center">บันทึกโดย</th>
                          <th class="text-center">จัดการ</th>
                        </tr>
                      </thead>
                      <tbody style="white-space: nowrap">
                        {{if .Promotions}}
                          {{range .Promotions}}
                          <tr class="align-middle">
                            <td class="text-center">
                              <input type="checkbox" class="row-checkbox" data-id="{{.PN_ID}}">
                            </td>
                            <td class="text-center first-col-no"></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">
                              <div class="pd-image-container" data-id="{{.PN_ID}}">
                                {{if .PN_IMG_1}}
                                <a href="/images/promotions/{{.PN_IMG_1}}" target="_blank">
                                  <img src="/images/promotions/{{.PN_IMG_1}}" class="pd-img-preview">
                                </a>
                                {{else}}
                                <div class="no-pd-img">No Image</div>
                                {{end}}
                                <div class="drop-overlay d-none">วางที่นี่</div>
                              </div>
                            </td>
                            <td>{{.PN_NAME}}</td>
                            <td>วันที่ {{.PN_DATE}} เวลา {{.PN_TIME}}</td>
                            <td>{{.US_NAME}} {{.FNAME}}</td>
                            <td class="text-center">
                              <button class="btn btn-outline-danger delete-promotion" data-id="{{.PN_ID}}">
                                <i class="bi bi-trash"></i> ลบข้อมูล
                              </button>
                            </td>
                          </tr>
                          {{end}}
                        {{else}}
                          <tr>
                            <td colspan="8" 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="addPromotionModal" tabindex="-1" aria-labelledby="addPromotionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header text-white" style="background: var(--luxury-deep) !important; color: white;">
              <h5 class="modal-title fw-bold" id="addPromotionModalLabel"><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="mb-3">
                  <label for="pnName" class="form-label fw-bold">หัวข้อโปรโมชั่น</label>
                  <input type="text" class="form-control" id="pnName" name="PN_NAME" required>
                </div>
                <div class="mb-3">
                  <label class="form-label fw-bold">อัพโหลดรูปภาพ (เลือกได้หลายรูป)</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="PN_STATUS" value="P">
                <input type="hidden" name="PN_STATUSCLOSE" value="O">
                <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">
              </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>
      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>
    {{template "backend_js" .}}
    {{template "datatable_code" .}}

  </body>
</html>

<!-- อัพโหลดรูปภาพ -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize DataTable
  var table = $('#table_promotion').DataTable({
    scrollY: '590px',
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    autoWidth: false,
    order: [[1, 'asc']],
    language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/th.json' },
    columnDefs: [
      { orderable: false, targets: [0, 3, 7] }
    ],
    drawCallback: function (settings) {
      var api = this.api();
      var rows = api.rows({ page: 'current' }).nodes();
      var rowCounter = 1;
      api.rows({ page: 'current' }).every(function (rowIdx, tableLoop, rowLoop) {
        $(rows).eq(rowLoop).find('.first-col-no').text(rowCounter++);
      });
    }
  });

  // Adjust columns on window resize
  $(window).on('resize orientationchange', function() {
    table.columns.adjust();
  });

  // Image Edit Mode Toggle
  var isImageEditMode = false;
  $('#btn_toggle_edit_mode').on('click', function() {
      isImageEditMode = !isImageEditMode;
      $(this).toggleClass('btn-outline-primary btn-primary');
      $('#edit_mode_status').text(isImageEditMode ? 'เปิด' : 'ปิด');
      $('#table_promotion').toggleClass('edit-mode', isImageEditMode);
  });

  // Drag & Drop Handlers for Promotion Images
  $(document).on('dragover', '.edit-mode .pd-image-container', function(e) {
      e.preventDefault();
      $(this).addClass('drag-over');
  });

  $(document).on('dragleave', '.edit-mode .pd-image-container', function(e) {
      e.preventDefault();
      $(this).removeClass('drag-over');
  });

  $(document).on('drop', '.edit-mode .pd-image-container', function(e) {
      e.preventDefault();
      var $container = $(this);
      $container.removeClass('drag-over');
      
      var files = e.originalEvent.dataTransfer.files;
      if (files.length === 0) return;
      
      var file = files[0];
      if (!file.type.match('image.*')) {
          alert('กรุณาเลือกไฟล์รูปภาพเท่านั้น');
          return;
      }

      var formData = new FormData();
      formData.append('image', file);
      formData.append('id', $container.data('id'));

      $container.find('.drop-overlay').removeClass('d-none').text('กําลังบันทึก...');

      $.ajax({
          url: '/api/promotion/upload-image',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(res) {
              if (res.status === 'success') {
                  var newSrc = '/images/promotions/' + res.filename + '?t=' + new Date().getTime();
                  if ($container.find('img').length > 0) {
                      $container.find('img').attr('src', newSrc);
                      $container.find('a').attr('href', newSrc);
                  } else {
                      $container.find('.no-pd-img').remove();
                      $container.prepend('<a href="' + newSrc + '" target="_blank"><img src="' + newSrc + '" class="pd-img-preview"></a>');
                  }
                  $container.find('.drop-overlay').addClass('d-none').text('วางที่นี่');
              } else {
                  alert('บันทึกรูปภาพไม่สําเร็จ: ' + (res.message || ''));
                  $container.find('.drop-overlay').addClass('d-none');
              }
          },
          error: function() {
              alert('เกิดข้อผิดพลาดในการเชื่อมต่อ');
              $container.find('.drop-overlay').addClass('d-none');
          }
      });
  });

  // 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 images
  const imageInput = document.getElementById('pnImages');
  const imagePreview = document.getElementById('imagePreview');
  
  imageInput.addEventListener('change', function() {
    imagePreview.innerHTML = '';
    if (this.files) {
      Array.from(this.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const col = document.createElement('div');
          col.className = 'col-3';
          col.innerHTML = `
            <div class="card h-100">
              <img src="${e.target.result}" class="card-img-top" style="height: 100px; object-fit: cover;">
              <div class="card-footer p-1 text-center">
                <small class="text-truncate d-block" style="font-size: 10px;">${file.name}</small>
              </div>
            </div>
          `;
          imagePreview.appendChild(col);
        }
        reader.readAsDataURL(file);
      });
    }
  });

  // Handle form submission
  const form = document.getElementById('promotionForm');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(form);
    fetch('/api/promotion/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', {
      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-promotion', function(e) {
    const btn = $(this);
    const id = btn.data('id');
    if (!confirm('ยืนยันการลบโปรโมชั่นนี้? การกระทำนี้ไม่สามารถย้อนกลับได้')) return;

    fetch('/api/promotion/delete', {
      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('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์'));
  });

  // Checkbox Management
  const selectAll = document.getElementById('selectAll');
  const bulkActionArea = document.getElementById('bulkActionArea');
  const selectedCount = document.getElementById('selectedCount');
  const btnBulkDelete = document.getElementById('btnBulkDelete');

  function updateBulkActionUI() {
    const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
    const count = checkedBoxes.length;
    
    if (selectedCount) selectedCount.textContent = count;
    if (bulkActionArea) bulkActionArea.style.display = count > 0 ? 'block' : 'none';
    
    if (selectAll) {
      const allCheckboxes = document.querySelectorAll('.row-checkbox');
      selectAll.checked = allCheckboxes.length > 0 && count === allCheckboxes.length;
      selectAll.indeterminate = count > 0 && count < allCheckboxes.length;
    }
  }

  if (selectAll) {
    selectAll.addEventListener('change', function() {
      const checkboxes = document.querySelectorAll('.row-checkbox');
      checkboxes.forEach(cb => cb.checked = this.checked);
      updateBulkActionUI();
    });
  }

  $(document).on('change', '.row-checkbox', function() {
    updateBulkActionUI();
  });

  // Bulk Delete
  if (btnBulkDelete) {
    btnBulkDelete.addEventListener('click', function() {
      const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
      const ids = Array.from(checkedBoxes).map(cb => parseInt(cb.dataset.id));
      
      if (ids.length === 0) return;

      if (!confirm(`ยืนยันการลบที่เลือกทั้งหมด ${ids.length} รายการ? การกระทำนี้ไม่สามารถย้อนกลับได้`)) return;

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

});
</script>


