<!doctype html>
<html lang="en">
  <head>
    {{template "backend_head" .}}
    <style>
      #employeeTable thead th {
        text-align: center !important;
        vertical-align: middle !important;
      }
      #groupDetailTable {
        font-size: 90%;
      }
      /* จัดการ sorting icon ของ DataTables ให้ไม่ดันข้อความ */
      table.dataTable thead th.dt-orderable-asc,
      table.dataTable thead th.dt-orderable-desc {
        padding-right: 30px !important;
      }
      .clickable-number {
        cursor: pointer;
        text-decoration: underline;
        color: #0d6efd;
      }
      .clickable-number:hover {
        color: #0a58ca;
        background-color: rgba(13, 110, 253, 0.1);
      .text-orange {
        color: #fd7e14 !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">จัดสรรสินเชื่อ 3</h3></div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="/ehongmd/main">หน้าหลัก</a></li>
                  <li class="breadcrumb-item active" aria-current="page">จัดสรรสินเชื่อ 3</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="app-content">
          <div class="container-fluid">
            
            <!-- ฟิลเตอร์เลือก ปี/เดือน -->
            <div class="card mb-3 shadow-sm">
              <div class="card-body py-2">
                <form method="GET" class="row g-2 align-items-center">
                  <div class="col-auto">
                    <label class="col-form-label fw-bold"><i class="bi bi-calendar3"></i> เลือกช่วงเวลา:</label>
                  </div>
                  <div class="col-auto">
                    <input type="number" name="year" id="filterYear" class="form-control form-control-sm" value="{{.SelectedYear}}" style="width: 100px;" placeholder="ระบุปี">
                  </div>
                  <div class="col-auto">
                    <select name="month" id="filterMonth" class="form-select form-select-sm">
                      {{$selMonth := .SelectedMonth}}
                      <option value="1" {{if eq $selMonth "1"}}selected{{end}}>เดือน 1</option>
                      <option value="2" {{if eq $selMonth "2"}}selected{{end}}>เดือน 2</option>
                      <option value="3" {{if eq $selMonth "3"}}selected{{end}}>เดือน 3</option>
                      <option value="4" {{if eq $selMonth "4"}}selected{{end}}>เดือน 4</option>
                      <option value="5" {{if eq $selMonth "5"}}selected{{end}}>เดือน 5</option>
                      <option value="6" {{if eq $selMonth "6"}}selected{{end}}>เดือน 6</option>
                      <option value="7" {{if eq $selMonth "7"}}selected{{end}}>เดือน 7</option>
                      <option value="8" {{if eq $selMonth "8"}}selected{{end}}>เดือน 8</option>
                      <option value="9" {{if eq $selMonth "9"}}selected{{end}}>เดือน 9</option>
                      <option value="10" {{if eq $selMonth "10"}}selected{{end}}>เดือน 10</option>
                      <option value="11" {{if eq $selMonth "11"}}selected{{end}}>เดือน 11</option>
                      <option value="12" {{if eq $selMonth "12"}}selected{{end}}>เดือน 12</option>
                    </select>
                  </div>
                  <div class="col-auto">
                    <button type="submit" class="btn btn-primary btn-sm px-3">
                      <i class="bi bi-search"></i> จัดสรรสินเชื่อ 3
                    </button>
                  </div>
                  <div class="col-auto">
                    <button type="button" class="btn btn-info btn-sm px-3" onclick="showLoan3Report()">
                      <i class="bi bi-file-earmark-text"></i> รายงานจัดสรรสินเชื่อ 3
                    </button>
                  </div>
                  <div class="col text-end">
                    <span class="badge text-bg-info">ข้อมูล ณ ปี {{.SelectedYear}} เดือน {{.SelectedMonth}}</span>
                  </div>
                </form>
              </div>
            </div>

            <!-- ส่วนสรุปรายพนักงาน -->
            <div id="summarySection">
              <div class="card shadow-sm">
                  <div class="card-header border-bottom-0">
                      <h3 class="card-title">รายชื่อพนักงาน - แผนกสินเชื่อ 3 (Loan 3)</h3>
                      <div class="card-tools">
                          <button type="button" class="btn btn-primary btn-sm me-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#uploadCsvModal">
                              <i class="bi bi-file-earmark-arrow-up"></i> นำเข้า excel นามสกุล .csv เท่านั้น
                          </button>
                          <span class="badge text-bg-primary">{{len .Employees}} คน</span>
                      </div>
                  </div>
                  <div class="card-body p-0">
                      <div class="table-responsive">
                          <table id="employeeTable" class="table table-bordered table-striped table-hover align-middle mb-0">
                              <thead class="align-middle">
                                  <!-- Row 1: Main Headers -->
                                  <tr class="table-dark text-center">
                                      <th rowspan="3" width="60" style="text-align: center !important;">ลำดับ</th>
                                      <th rowspan="3" style="text-align: center !important;">ชื่อ-นามสกุล</th>
                                      <th rowspan="3" width="80" style="text-align: center !important;">ชื่อเล่น</th>
                                      <th colspan="5" class="bg-primary bg-opacity-25 text-dark" style="text-align: center !important;">บัญชี (จำนวนราย)</th>
                                      <th colspan="5" class="bg-success bg-opacity-25 text-dark" style="text-align: center !important;">มูลค่า (บาท)</th>
                                  </tr>
                                  <!-- Row 2: Totals -->
                                  <tr class="text-center">
                                      <th class="bg-primary bg-opacity-10 text-dark fw-bold text-center clickable-number" onclick="showGroupDetails('TOTAL', 'รวมทั้งหมด')">{{.OverallSummary.TotalCount}}</th>
                                      <th class="bg-primary bg-opacity-10 text-dark fw-bold text-center clickable-number" onclick="showGroupDetails('1', 'กลุ่ม 1-3 งวด')">{{.OverallSummary.G1Count}}</th>
                                      <th class="bg-primary bg-opacity-10 text-dark fw-bold text-center clickable-number" onclick="showGroupDetails('NPL', 'กลุ่ม NPL')">{{.OverallSummary.GNPLCount}}</th>
                                      <th class="bg-primary bg-opacity-10 text-dark fw-bold text-center clickable-number" onclick="showGroupDetails('2', 'กลุ่ม ค้าง 1-2')">{{.OverallSummary.G2Count}}</th>
                                      <th class="bg-primary bg-opacity-10 text-dark fw-bold text-center clickable-number" onclick="showGroupDetails('3', 'กลุ่ม ค้าง >= 3')">{{.OverallSummary.G3Count}}</th>
                                      
                                      <th class="bg-success bg-opacity-10 text-dark text-center fw-bold text-success format-price">{{.OverallSummary.TotalPrice}}</th>
                                      <th class="bg-success bg-opacity-10 text-dark text-center fw-bold text-danger format-price">{{.OverallSummary.G1Price}}</th>
                                      <th class="bg-success bg-opacity-10 text-dark text-center fw-bold text-info format-price">{{.OverallSummary.GNPLPrice}}</th>
                                      <th class="bg-success bg-opacity-10 text-dark text-center fw-bold text-orange format-price">{{.OverallSummary.G2Price}}</th>
                                      <th class="bg-success bg-opacity-10 text-dark text-center fw-bold text-secondary format-price">{{.OverallSummary.G3Price}}</th>
                                  </tr>
                                  <!-- Row 3: Sub Labels -->
                                  <tr class="text-center">
                                      <th class="bg-primary bg-opacity-25 text-dark small" style="text-align: center !important;">รวม</th>
                                      <th class="bg-primary bg-opacity-25 text-dark small text-danger" style="text-align: center !important;">1-3 งวด</th>
                                      <th class="bg-primary bg-opacity-25 text-dark small text-info" style="text-align: center !important;">NPL</th>
                                      <th class="bg-primary bg-opacity-25 text-dark small text-orange" style="text-align: center !important;">ค้าง 1-2</th>
                                      <th class="bg-primary bg-opacity-25 text-dark small text-secondary" style="text-align: center !important;">ค้าง >= 3</th>
  
                                      <th class="bg-success bg-opacity-25 text-dark small" style="text-align: center !important;">รวม</th>
                                      <th class="bg-success bg-opacity-25 text-dark small text-danger" style="text-align: center !important;">1-3 งวด</th>
                                      <th class="bg-success bg-opacity-25 text-dark small text-info" style="text-align: center !important;">NPL</th>
                                      <th class="bg-success bg-opacity-25 text-dark small text-orange" style="text-align: center !important;">ค้าง 1-2</th>
                                      <th class="bg-success bg-opacity-25 text-dark small text-secondary" style="text-align: center !important;">ค้าง >= 3</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  {{range $index, $e := .Employees}}
                                  <tr>
                                      <td class="text-center">{{add $index 1}}.</td>
                                      <td>
                                        <div class="fw-bold">{{.TNAME}} {{.FNAME}} {{.LNAME}}</div>
                                      </td>
                                      <td class="text-center">{{.NICK}}</td>
                                      <!-- บัญชี -->
                                      <td class="text-center fw-bold text-success clickable-number" onclick="showGroupDetails('TOTAL', 'ทั้งหมด', '{{.US_NAME}}', '{{.TNAME}} {{.FNAME}} {{.LNAME}}')">{{if gt .TotalCount 0}}{{.TotalCount}}{{else}}0{{end}}</td>
                                      <td class="text-center fw-bold text-danger clickable-number" onclick="showGroupDetails('1', '1-3 งวด', '{{.US_NAME}}', '{{.TNAME}} {{.FNAME}} {{.LNAME}}')">{{if gt .G1Count 0}}{{.G1Count}}{{else}}0{{end}}</td>
                                      <td class="text-center fw-bold text-info clickable-number" onclick="showGroupDetails('NPL', 'NPL', '{{.US_NAME}}', '{{.TNAME}} {{.FNAME}} {{.LNAME}}')">{{if gt .GNPLCount 0}}{{.GNPLCount}}{{else}}0{{end}}</td>
                                      <td class="text-center fw-bold text-orange clickable-number" onclick="showGroupDetails('2', 'ค้าง 1-2', '{{.US_NAME}}', '{{.TNAME}} {{.FNAME}} {{.LNAME}}')">{{if gt .G2Count 0}}{{.G2Count}}{{else}}0{{end}}</td>
                                      <td class="text-center fw-bold text-secondary clickable-number" onclick="showGroupDetails('3', 'ค้าง >= 3', '{{.US_NAME}}', '{{.TNAME}} {{.FNAME}} {{.LNAME}}')">{{if gt .G3Count 0}}{{.G3Count}}{{else}}0{{end}}</td>
                                      <!-- มูลค่า -->
                                      <td class="text-end text-success fw-bold format-price">{{if gt .TotalPrice 0.0}}{{.TotalPrice}}{{else}}0{{end}}</td>
                                      <td class="text-end text-danger fw-bold format-price">{{if gt .G1Price 0.0}}{{.G1Price}}{{else}}0{{end}}</td>
                                      <td class="text-end text-info fw-bold format-price">{{if gt .GNPLPrice 0.0}}{{.GNPLPrice}}{{else}}0{{end}}</td>
                                      <td class="text-end text-orange fw-bold format-price">{{if gt .G2Price 0.0}}{{.G2Price}}{{else}}0{{end}}</td>
                                      <td class="text-end text-secondary fw-bold format-price">{{if gt .G3Price 0.0}}{{.G3Price}}{{else}}0{{end}}</td>
                                  </tr>
                                  {{else}}
                                  <tr>
                                      <td colspan="13" class="text-center py-4 text-muted">ไม่พบข้อมูลพนักงาน</td>
                                  </tr>
                                  {{end}}
                              </tbody>
                              <tfoot>
                                  <tr class="text-center fw-bold bg-light">
                                      <td colspan="3" class="text-end bg-dark text-light">รวมทั้งหมด</td>
                                      <td class="text-center bg-primary bg-opacity-10 text-success">0</td>
                                      <td class="text-center text-danger bg-primary bg-opacity-10">0</td>
                                      <td class="text-center text-info bg-primary bg-opacity-10">0</td>
                                      <td class="text-center text-orange bg-primary bg-opacity-10">0</td>
                                      <td class="text-center text-secondary bg-primary bg-opacity-10">0</td>
                                      <td class="text-end text-success fw-bold bg-success bg-opacity-10"></td>
                                      <td class="text-end text-danger fw-bold bg-success bg-opacity-10"></td>
                                      <td class="text-end text-info fw-bold bg-success bg-opacity-10"></td>
                                      <td class="text-end text-orange fw-bold bg-success bg-opacity-10"></td>
                                      <td class="text-end text-secondary fw-bold bg-success bg-opacity-10"></td>
                                  </tr>
                              </tfoot>
                          </table>
                      </div>
                  </div>
              </div>
            </div>

            <!-- ส่วนรายงานจัดสรรสินเชื่อ 3 (ซ่อนไว้เริ่มต้น) -->
            <div id="reportSection" style="display: none;">
              <div class="card shadow-sm">
                  <div class="card-header bg-white">
                      <h3 class="card-title">รายงานการจัดสรรสินเชื่อ 3 (ปี {{.SelectedYear}} เดือน {{.SelectedMonth}})</h3>
                      <div class="card-tools">
                          <button type="button" class="btn btn-secondary btn-sm shadow-sm" onclick="showSummarySection()">
                              <i class="bi bi-arrow-left-circle"></i> กลับไปหน้าสรุป
                          </button>
                      </div>
                  </div>
                  <div class="card-body p-0">
                      <div id="reportLoading" class="text-center py-5">
                          <div class="spinner-border text-primary" role="status">
                              <span class="visually-hidden">Loading...</span>
                          </div>
                          <p class="mt-2">กำลังโหลดข้อมูลรายงาน...</p>
                      </div>
                      <div id="reportTableContainer" class="table-responsive p-3" style="display: none;">
                          <table id="fullReportTable" class="table table-bordered table-striped table-hover align-middle mb-0">
                              <thead class="table-dark text-center" style="white-space: nowrap">
                                  <tr>
                                      <th>ลำดับ</th>
                                      <th>พนักงาน</th>
                                      <th>กลุ่ม</th>
                                      <th>เลขที่บัญชี</th>
                                      <th>ชื่อลูกค้า</th>
                                      <th>ค่างวด</th>
                                      <th>ค้างชำระ</th>
                                      <th>ค้างงวด</th>
                                      <th>Non</th>
                                      <th>ยอดรวม</th>
                                      <th>งวดชำระ</th>
                                      <th>ชำระแล้ว</th>
                                      <th>หนี้คงเหลือ</th>
                                      <th>ชำระไปแล้ว %</th>
                                      <th>สถานะหนี้</th>
                                      <th>#เขต</th>
                                      <th>ชื่อเขต</th>
                                      <th>จังหวัดเขต</th>
                                      <th>ที่อยู่</th>
                                      <th>ตำบล</th>
                                      <th>อำเภอ</th>
                                      <th>จังหวัด</th>
                                      <th>อาชีพ</th>
                                      <th>ยี่ห้อ</th>
                                      <th>ตระกูลสินค้า</th>
                                      <th>ประเภทหนี้</th>
                                  </tr>
                              </thead>
                              <tbody id="fullReportBody" style="white-space: nowrap">
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <!-- Modal สำหรับแสดงรายละเอียดข้อมูลกลุ่ม -->
      <div class="modal fade" id="groupDetailModal" tabindex="-1" aria-labelledby="groupDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="max-width: 98%; margin-top: 1vh; margin-bottom: 1vh;">
          <div class="modal-content">
            <div class="modal-header bg-primary text-white">
              <h5 class="modal-title" id="groupDetailModalLabel">รายละเอียดข้อมูลสัญญา</h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <div id="modalLoading" class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">กำลังโหลดข้อมูล...</p>
              </div>
              <div id="modalTableContainer" style="display: none;">
                <div class="row mb-2 align-items-center">
                  <div class="col-auto">
                    <div class="input-group input-group-sm">
                      <span class="input-group-text bg-light fw-bold">มอบหมายพนักงาน</span>
                      <select class="form-select" id="massAssignEmployee" style="min-width: 200px;">
                        <option value="">- เลือกพนักงาน -</option>
                        {{range .Employees}}
                        <option value="{{.US_NAME}}">{{.TNAME}}{{.FNAME}} {{.LNAME}} ({{.NICK}})</option>
                        {{end}}
                      </select>
                      <button class="btn btn-primary" type="button" onclick="assignSelectedRows()"><i class="bi bi-save"></i> บันทึก</button>
                    </div>
                  </div>
                </div>
                <div class="table-responsive">
                  <table id="groupDetailTable" class="table table-bordered table-striped table-hover align-middle table-sm">
                    <thead class="table-dark text-center" style="white-space: nowrap">
                      <tr>
                        <th>ลำดับ</th>
                        <th>
                          <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onclick="$('.row-checkbox').prop('checked', this.checked)">
                        </th>
                      <th>พนง.</th>
                      <th>กลุ่ม</th>
                      <th>เลขที่บัญชี</th>
                      <th>ชื่อลูกค้า</th>
                      <th>ค่างวด</th>
                      <th>ค้างชำระ</th>
                      <th>ค้างงวด</th>
                      <th>Non</th>
                      <th>ยอดรวม</th>
                      <th>งวดชำระ</th>
                      <th>ชำระแล้ว</th>
                      <th>หนี้คงเหลือ</th>
                      <th>ชำระไปแล้ว %</th>
                      <th>สถานะหนี้</th>
                      <th>#เขต</th>
                      <th>ชื่อเขต</th>
                      <th>จังหวัดเขต</th>
                      <th>ที่อยู่</th>
                      <th>ตำบล</th>
                      <th>อำเภอ</th>
                      <th>จังหวัด</th>
                      <th>อาชีพ</th>
                      <th>ยี่ห้อ</th>
                      <th>ตระกูลสินค้า</th>
                      <th>ประเภทหนี้</th>
                    </tr>
                  </thead>
                  <tbody id="groupDetailBody" style="white-space: nowrap">
                  </tbody>
                </table>
              </div>
            </div> <!-- End modalTableContainer -->
          </div> <!-- End modal-body -->
        </div> <!-- End modal-content -->
      </div> <!-- End modal-dialog -->
    </div> <!-- End modal -->

      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>

    <!-- Modal สำหรับอัพโหลด CSV -->
    <div class="modal fade" id="uploadCsvModal" tabindex="-1" aria-labelledby="uploadCsvModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" style="max-width: 1040px;">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="uploadCsvModalLabel">นำเข้าข้อมูล excel .csv ลงฐานข้อมูล</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form id="uploadCsvForm" enctype="multipart/form-data">
            <div class="modal-body">

              <!-- layout 2 คอลัมน์: รูปซ้าย + คำอธิบายขวา -->
              <div class="row g-3 mb-3">
                <!-- รูปตัวอย่าง CSV -->
                <div class="col-md-5">
                  <div style="width: 100%; overflow: hidden; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); background: #f8f9fa; height: 100%; display: flex; align-items: center; justify-content: center;">
                    <img src="/images/csv_g.png" alt="ตัวอย่างไฟล์ CSV" style="width: 100%; max-height: 300px; object-fit: contain; display: block; padding: 4px;">
                  </div>
                </div>
                <!-- คำอธิบายขั้นตอน -->
                <div class="col-md-7">
                  <div class="alert alert-info py-2 mb-2" role="alert">
                    <div class="fw-bold mb-1"><i class="bi bi-info-circle-fill me-1"></i> วิธีการบันทึกข้อมูล</div>
                    <ol class="mb-0 ps-3 small">
                      <li>เตรียมไฟล์ Excel แล้ว <strong>บันทึกเป็นนามสกุล .csv</strong> (CSV UTF-8)</li>
                      <li>ไฟล์ต้องมีคอลัมน์ครบ 4 คอลัมน์ตามลำดับ:
                        <ul class="mt-1">
                          <li><code>CT_NO</code> — เลขที่สัญญา</li>
                          <li><code>UPDATE_Y</code> — ปี (เช่น <code>2026</code>)</li>
                          <li><code>UPDATE_M</code> — เดือน (เช่น <code>4</code>)</li>
                          <li><code>L_TYPE</code> — กลุ่มหนี้:
                            <ul class="mt-1">
                              <li><code>1</code> = 1-3 งวด</li>
                              <li><code>2</code> = ค้าง 1-2</li>
                              <li><code>3</code> = ค้าง &gt;= 3</li>
                              <li><code>NPL</code> = NPL</li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li>กดปุ่ม <strong>"เลือกไฟล์"</strong> แล้วเลือกไฟล์ .csv ที่เตรียมไว้</li>
                      <li>กดปุ่ม <strong>"บันทึกข้อมูลลงฐานข้อมูล"</strong> เพื่อนำเข้าข้อมูล</li>
                    </ol>
                  </div>
                  <div class="alert alert-warning py-2 mb-0" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    <strong>หมายเหตุ:</strong> ข้อมูลเดิมจะถูก <strong>แทนที่ด้วยข้อมูลใหม่</strong> ทั้งหมด กรุณาตรวจสอบไฟล์ก่อนบันทึก
                  </div>
                </div>
              </div>

              <div class="mb-3">
                <label for="csv_file" class="form-label fw-bold"><i class="bi bi-file-earmark-spreadsheet me-1 text-success"></i> เลือกไฟล์ .csv</label>
                <input class="form-control" type="file" id="csv_file" name="csv_file" accept=".csv" required>
                <div class="form-text">รองรับเฉพาะไฟล์ .csv เท่านั้น (คอลัมน์: CT_NO, UPDATE_Y, UPDATE_M, L_TYPE)</div>
              </div>
              <div id="uploadStatus"></div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
              <button type="submit" class="btn btn-primary">บันทึกข้อมูลลงฐานข้อมูล</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    {{template "backend_js" .}}
    <script>
      $(document).ready(function() {
          $('#employeeTable').DataTable({
              "language": {
                  "url": "https://cdn.datatables.net/plug-ins/1.10.24/i18n/Thai.json"
              },
              "layout": {
                  "topStart": "buttons",
                  "topEnd": "search"
              },
              "buttons": [
                  {
                      "extend": "excelHtml5",
                      "text": '<i class="bi bi-file-earmark-excel"></i> Export Excel',
                      "className": "btn btn-success btn-sm mb-3",
                      "title": "รายชื่อพนักงานแผนกสินเชื่อ 3"
                  }
              ],
              "paging": false,
              "scrollY": "600px",
              "scrollCollapse": true,
              "info": false,
              "order": [[0, "asc"]],
              "footerCallback": function ( row, data, start, end, display ) {
                  var api = this.api();
                  var intVal = function ( i ) {
                      return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;
                  };
                  for(let i=3; i<=12; i++) {
                      // Extract plain text value from potentially HTML-formatted cell (e.g. if it has clickable span)
                      var total = api.column( i ).data().reduce( function (a, b) {
                          // use simple regex to strip html tags if any
                          let valA = typeof a === 'string' ? a.replace(/<[^>]*>?/gm, '') : a;
                          let valB = typeof b === 'string' ? b.replace(/<[^>]*>?/gm, '') : b;
                          return intVal(valA) + intVal(valB);
                      }, 0 );
                      
                      let displayHtml = total;
                      if (i >= 8) {
                          displayHtml = total.toLocaleString('en-US', {minimumFractionDigits: 2});
                      }

                      if (i >= 3 && i <= 7) {
                          let type = '';
                          let title = '';
                          if (i === 3) { type = 'TOTAL'; title = 'ทั้งหมด'; }
                          else if (i === 4) { type = '1'; title = '1-3 งวด'; }
                          else if (i === 5) { type = 'NPL'; title = 'NPL'; }
                          else if (i === 6) { type = '2'; title = 'ค้าง 1-2'; }
                          else if (i === 7) { type = '3'; title = 'ค้าง >= 3'; }
                          
                          displayHtml = `<span class="clickable-number" onclick="showGroupDetails('${type}', '${title}', 'ASSIGNED_ONLY', 'พนักงานทุกคน')">${displayHtml}</span>`;
                      }

                      $( api.column( i ).footer() ).html( displayHtml );
                  }
              }
          });

          // Format prices in table rows
          $('.format-price').each(function() {
              let val = parseFloat($(this).text());
              if(val > 0) {
                  $(this).text(val.toLocaleString('en-US', {minimumFractionDigits: 2}));
              } else {
                  $(this).text('0.00');
              }
          });
      });

      // สร้างตัวเลือกพนักงานจาก .Employees (ใช้ในกรณีต้องการใช้อีก)
      const employeeOptions = `
        <option value="">- เลือกพนักงาน -</option>
        <option value="UNASSIGNED" class="text-danger fw-bold">- คืนงาน (ดึงกลับส่วนกลาง) -</option>
        {{range .Employees}}
        <option value="{{.US_NAME}}">{{.TNAME}}{{.FNAME}} {{.LNAME}} ({{.NICK}})</option>
        {{end}}
      `;

      function assignSelectedRows() {
          const usName = $('#massAssignEmployee').val();
          if (!usName) {
              alert('กรุณาเลือกพนักงานที่ต้องการมอบหมาย');
              return;
          }

          const selectedCtNos = [];
          $('.row-checkbox:checked').each(function() {
              selectedCtNos.push($(this).val());
          });

          if (selectedCtNos.length === 0) {
              alert('กรุณาเลือกรายการที่ต้องการมอบหมายอย่างน้อย 1 รายการ');
              return;
          }

          if (!confirm('ยืนยันการมอบหมายข้อมูล ' + selectedCtNos.length + ' รายการ?')) {
              return;
          }

          const year = $('#filterYear').val();
          const month = $('#filterMonth').val();

          $.ajax({
              url: 'api/loan3/assign_employee',
              method: 'POST',
              contentType: 'application/json',
              data: JSON.stringify({
                  year: year,
                  month: month,
                  usName: usName,
                  ctNos: selectedCtNos
              }),
              success: function(res) {
                  if (res.status === 'success') {
                      alert('บันทึกข้อมูลเรียบร้อยแล้ว');
                      $('#groupDetailModal').modal('hide');
                      // โหลดหน้าใหม่เพื่อให้ตัวเลขสรุปอัพเดท
                      window.location.reload();
                  } else {
                      alert('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
                  }
              },
              error: function(err) {
                  console.error(err);
                  alert('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
              }
          });
      }

      function showGroupDetails(type, title, employeeUsName = null, employeeName = null) {
          if (employeeUsName) {
              $('#groupDetailModalLabel').text('รายละเอียดข้อมูลของ ' + employeeName + ' : ' + title);
          } else {
              $('#groupDetailModalLabel').text('รายละเอียดข้อมูล (ว่าง): ' + title);
          }
          $('#modalLoading').show();
          $('#modalTableContainer').hide();
          $('#selectAllCheckbox').prop('checked', false);
          $('#groupDetailModal').modal('show');

          const year = $('#filterYear').val();
          const month = $('#filterMonth').val();

          $.ajax({
              url: 'api/loan3/group_details',
              data: { year: year, month: month, type: type, usName: employeeUsName || '' },
              method: 'GET',
              success: function(data) {
                  let html = '';
                  if (data && data.length > 0) {
                      data.forEach(function(item, index) {
                          html += `<tr class="text-center">
                              <td>${index + 1}.</td>
                              <td>
                                <input class="form-check-input row-checkbox" type="checkbox" value="${item.CT_NO}">
                              </td>
                              <td class="text-start">${item.EMP_NAME ? `${item.EMP_NAME}` : '<span class="text-muted small">-</span>'}</td>
                              <td>${getGroupText(item.L_TYPE)}</td>
                              <td class="fw-bold text-primary" style="font-family:monospace;">${item.CT_NO}</td>
                              <td class="text-start">${item.PS_NAME}</td>
                              <td class="text-end">${formatNumber(item.DUE_AMNT)}</td>
                              <td class="text-end text-danger">${formatNumber(item.NOTPAY_AMNT)}</td>
                              <td class="text-danger fw-bold">${item.STNPY} -> ${item.NOTPAY_COUNT}</td>
                              <td class="text-danger fw-bold">${item.STNON} -> ${item.NON_COUNT}</td>
                              <td class="text-end">${formatNumber(item.PRICE)}</td>
                              <td>${item.PAYDUE_COUNT}</td>
                              <td class="text-end">${formatNumber(item.PAYAMNT)}</td>
                              <td class="text-end fw-bold">${formatNumber(item.BL_DUE_1)}</td>
                              <td class="text-primary fw-bold">${getPaidPercent(item.PRICE, item.PAYAMNT)}%</td>
                              <td class="text-start">
                                  <span class="text-muted small">${getXStatusText(item.XSTATUS)}</span> <span class="fw-bold text-primary">${getLockStatusText(item.LOCK_STATUS, item.BL_DUE_1)}</span>
                              </td>
                              <td>${item.ZONE_CODE}</td>
                              <td>เขต${item.DF_AMNAME}</td>
                              <td>${item.DF_PRNAME}</td>
                              <td class="text-start">${item.DF_ADDRHOME}</td>
                              <td>${item.DF_TUNAME}</td>
                              <td>${item.DF_AMNAME}</td>
                              <td>${item.DF_PRNAME}</td>
                              <td>${item.OCCUPATION_NAME}</td>
                              <td>${item.BRAND_NAME}</td>
                              <td>${item.FML_NAME}</td>
                              <td></td>
                          </tr>`;
                      });
                  } else {
                      html = '<tr><td colspan="26" class="text-center py-3">ไม่พบข้อมูล</td></tr>';
                  }
                  
                  // Destroy existing DataTable if any
                  if ($.fn.DataTable.isDataTable('#groupDetailTable')) {
                      $('#groupDetailTable').DataTable().destroy();
                  }

                  $('#groupDetailBody').html(html);
                  $('#modalLoading').hide();
                  $('#modalTableContainer').show();

                  // Re-init DataTable for modal
                  $('#groupDetailTable').DataTable({
                      "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.24/i18n/Thai.json" },
                      "layout": {
                          "topStart": "buttons",
                          "topEnd": "search"
                      },
                      "buttons": [
                          {
                              "extend": "excelHtml5",
                              "text": '<i class="bi bi-file-earmark-excel"></i> Export Excel',
                              "className": "btn btn-success btn-sm mb-2",
                              "title": "รายละเอียดสินเชื่อ",
                              "exportOptions": {
                                  "columns": ":visible:not(:eq(1))" // Exclude checkbox column
                              }
                          }
                      ],
                      "order": [[0, "asc"]],
                      "paging": false,
                      "scrollY": "85vh",
                      "scrollX": true,
                      "scrollCollapse": true,
                      "info": false
                  });
              },
              error: function() {
                  $('#groupDetailBody').html('<tr><td colspan="26" class="text-center text-danger py-3">เกิดข้อผิดพลาดในการโหลดข้อมูล</td></tr>');
                  $('#modalLoading').hide();
                  $('#modalTableContainer').show();
              }
          });
      }

      function getGroupText(t) {
          t = (t || '').trim();
          switch(t) {
              case '1': return '1-3 งวด';
              case '2': return 'ค้าง 1-2';
              case '3': return 'ค้าง >= 3';
              case 'NPL': return 'NPL';
              default: return t;
          }
      }

      function getPaidPercent(price, payamnt) {
          if (!price || price <= 0) return "0.00";
          return ((payamnt / price) * 100).toFixed(2);
      }

      function getXStatusText(s) {
          s = (s || '').trim();
          switch (s) {
              case "0": return "ปกติ";
              case "1": return "สินค้าขายต่อ";
              case "2": return "สินค้าหาย";
              case "3": return "สินค้าจำนำ";
              case "4": return "สินค้าอยู่ต่างจังหวัด";
              case "5": return "สินค้าเกิดอุบัติเหตุ";
              case "6": return "สินค้าอยู่ สน.";
              case "7": return "สินค้าไม่มีข้อมูล(พบซื้อหรือค้ำแต่ไม่พบสินค้า)";
              case "8": return "แก๊งค์";
              case "9": return "สินค้าไม่มีข้อมูล(ไม่พบซื้อและค้ำและสินค้า)";
              default: return s;
          }
      }

      function getLockStatusText(s, blDue1) {
          s = (s || '').trim();
          if (s === "N" || s === "") return "ปกติ";
          else if (s === "E") return "ผิดปกติ (มีปัญหา)";
          else if (s === "W") return "รับคืนรอไถ่ถอน";
          else if (s === "R") return "รับคืน ปิดสัญญา";
          else if (s === "O") return "รับสินค้าตีเทิร์น ปิดสัญญา";
          else if (s === "C") return "รับคืนสินค้า ปิดสัญญา";
          else if (s === "L") return "หนี้สูญ ปิดสัญญา";
          else if (s === "X") return "สัญญาถูกยกเลิกแล้ว";
          else if (s === "D" || s === "Y") return "ติดต่อสินเชื่อ";
          else if (s === "F") {
              if (blDue1 <= 0) return "หมดงวด (B/L)";
              else return "หมดงวด(ค้างค่าเบี้ยปรับและค่าอื่นฯ)";
          }
          return s;
      }

      function formatNumber(num) {
          return parseFloat(num).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }

      $(document).ready(function() {
          // จัดการการอัพโหลด CSV ผ่าน AJAX
          $('#uploadCsvForm').on('submit', function(e) {
              e.preventDefault();
              var formData = new FormData(this);
              $('#uploadStatus').html('<div class="text-info"><div class="spinner-border spinner-border-sm" role="status"></div> กำลังบันทึกข้อมูล...</div>');
              
              $.ajax({
                  url: '/ehongmd/main_1/upload_csv',
                  type: 'POST',
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function(response) {
                      if (response === 'Success') {
                          $('#uploadStatus').html('<div class="text-success"><i class="bi bi-check-circle-fill"></i> บันทึกข้อมูลลงฐานข้อมูล CONFIG.dbo.LOAN3_CSV เรียบร้อยแล้ว!</div>');
                          setTimeout(function() {
                              $('#uploadCsvModal').modal('hide');
                              $('#uploadCsvForm')[0].reset();
                              $('#uploadStatus').html('');
                              location.reload(); // รีโหลดหน้าเพื่อดูข้อมูลใหม่
                          }, 2500);
                      } else {
                          $('#uploadStatus').html('<div class="text-danger">เกิดข้อผิดพลาด: ' + response + '</div>');
                      }
                  },
                  error: function(xhr) {
                      $('#uploadStatus').html('<div class="text-danger">เกิดข้อผิดพลาด: ' + xhr.responseText + '</div>');
                  }
              });
          });
      });
      function showLoan3Report() {
          $('#summarySection').hide();
          $('#reportSection').show();
          $('#reportLoading').show();
          $('#reportTableContainer').hide();

          const year = $('#filterYear').val();
          const month = $('#filterMonth').val();

          $.ajax({
              url: 'api/loan3/group_details',
              data: { year: year, month: month, type: 'TOTAL', usName: 'ALL' },
              method: 'GET',
              success: function(data) {
                  let html = '';
                  if (data && data.length > 0) {
                      data.forEach(function(item, index) {
                          html += `<tr class="text-center">
                              <td>${index + 1}.</td>
                              <td class="text-start">${item.EMP_NAME ? `${item.EMP_NAME}` : '<span class="text-muted small">-</span>'}</td>
                              <td>${getGroupText(item.L_TYPE)}</td>
                              <td class="fw-bold text-primary" style="font-family:monospace;">${item.CT_NO}</td>
                              <td class="text-start">${item.PS_NAME}</td>
                              <td class="text-end">${formatNumber(item.DUE_AMNT)}</td>
                              <td class="text-end text-danger">${formatNumber(item.NOTPAY_AMNT)}</td>
                              <td class="text-danger fw-bold">${item.STNPY} -> ${item.NOTPAY_COUNT}</td>
                              <td class="text-danger fw-bold">${item.STNON} -> ${item.NON_COUNT}</td>
                              <td class="text-end">${formatNumber(item.PRICE)}</td>
                              <td>${item.PAYDUE_COUNT}</td>
                              <td class="text-end">${formatNumber(item.PAYAMNT)}</td>
                              <td class="text-end fw-bold">${formatNumber(item.BL_DUE_1)}</td>
                              <td class="text-primary fw-bold">${getPaidPercent(item.PRICE, item.PAYAMNT)}%</td>
                              <td class="text-start">
                                  <span class="text-muted small">${getXStatusText(item.XSTATUS)}</span> <span class="fw-bold text-primary">${getLockStatusText(item.LOCK_STATUS, item.BL_DUE_1)}</span>
                              </td>
                              <td>${item.ZONE_CODE}</td>
                              <td>เขต${item.DF_AMNAME}</td>
                              <td>${item.DF_PRNAME}</td>
                              <td class="text-start">${item.DF_ADDRHOME}</td>
                              <td>${item.DF_TUNAME}</td>
                              <td>${item.DF_AMNAME}</td>
                              <td>${item.DF_PRNAME}</td>
                              <td>${item.OCCUPATION_NAME}</td>
                              <td>${item.BRAND_NAME}</td>
                              <td>${item.FML_NAME}</td>
                              <td></td>
                          </tr>`;
                      });
                  } else {
                      html = '<tr><td colspan="26" class="text-center py-3">ไม่พบข้อมูลรายงาน</td></tr>';
                  }

                  if ($.fn.DataTable.isDataTable('#fullReportTable')) {
                      $('#fullReportTable').DataTable().destroy();
                  }

                  $('#fullReportBody').html(html);
                  $('#reportLoading').hide();
                  $('#reportTableContainer').show();

                  $('#fullReportTable').DataTable({
                      "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.24/i18n/Thai.json" },
                      "layout": {
                          "topStart": "buttons",
                          "topEnd": "search"
                      },
                      "buttons": [
                          {
                              "extend": "excelHtml5",
                              "text": '<i class="bi bi-file-earmark-excel"></i> Export Excel',
                              "className": "btn btn-success btn-sm mb-2",
                              "title": "รายงานจัดสรรสินเชื่อ 3"
                          }
                      ],
                      "order": [[0, "asc"]],
                      "paging": false,
                      "scrollY": "70vh",
                      "scrollX": true,
                      "scrollCollapse": true,
                      "info": false
                  });
              },
              error: function() {
                  $('#fullReportBody').html('<tr><td colspan="26" class="text-center text-danger py-3">เกิดข้อผิดพลาดในการโหลดข้อมูลรายงาน</td></tr>');
                  $('#reportLoading').hide();
                  $('#reportTableContainer').show();
              }
          });
      }

      function showSummarySection() {
          $('#reportSection').hide();
          $('#summarySection').show();
      }
    </script>
  </body>
</html>
