<!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">รายงานจัดสรรสินเชื่อ 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-4">
                <div class="card-body">
                    <form action="/ehongmd/ehongmd/main_1/index_loan3_report" method="GET" class="row g-3 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label fw-bold">ปี (ค.ศ.)</label>
                            <input type="number" name="year" class="form-control shadow-sm" value="{{.SelectedYear}}" placeholder="เช่น 2026">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold">เดือน</label>
                            <select name="month" id="monthSelect" class="form-select shadow-sm">
                                <option value="1" {{if eq .SelectedMonth "1"}}selected{{end}}>1 - มกราคม</option>
                                <option value="2" {{if eq .SelectedMonth "2"}}selected{{end}}>2 - กุมภาพันธ์</option>
                                <option value="3" {{if eq .SelectedMonth "3"}}selected{{end}}>3 - มีนาคม</option>
                                <option value="4" {{if eq .SelectedMonth "4"}}selected{{end}}>4 - เมษายน</option>
                                <option value="5" {{if eq .SelectedMonth "5"}}selected{{end}}>5 - พฤษภาคม</option>
                                <option value="6" {{if eq .SelectedMonth "6"}}selected{{end}}>6 - มิถุนายน</option>
                                <option value="7" {{if eq .SelectedMonth "7"}}selected{{end}}>7 - กรกฎาคม</option>
                                <option value="8" {{if eq .SelectedMonth "8"}}selected{{end}}>8 - สิงหาคม</option>
                                <option value="9" {{if eq .SelectedMonth "9"}}selected{{end}}>9 - กันยายน</option>
                                <option value="10" {{if eq .SelectedMonth "10"}}selected{{end}}>10 - ตุลาคม</option>
                                <option value="11" {{if eq .SelectedMonth "11"}}selected{{end}}>11 - พฤศจิกายน</option>
                                <option value="12" {{if eq .SelectedMonth "12"}}selected{{end}}>12 - ธันวาคม</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100 shadow-sm">
                                <i class="bi bi-search"></i> ค้นหาข้อมูล
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h3 class="card-title">ข้อมูลการจัดสรรสินเชื่อ 3 (ปี {{.SelectedYear}} เดือน {{.SelectedMonth}})</h3>
                    <div class="card-tools">
                        <span class="badge text-bg-success">{{len .ReportRecords}} รายการ</span>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive p-3">
                        <table id="reportTable" 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 style="white-space: nowrap">
                                {{range $index, $e := .ReportRecords}}
                                <tr class="text-center">
                                    <td>{{add $index 1}}.</td>
                                    <td class="text-start">{{.EMP_NAME}}</td> <!-- พนง. -->
                                    <td>{{.GetGroupText}}</td> <!-- กลุ่ม -->
                                    <td class="fw-bold text-primary" style="font-family:monospace;">{{.CT_NO}}</td>
                                    <td class="text-start">{{.PS_NAME}}</td>
                                    <td class="text-end">{{.FormatMoney .DUE_AMNT}}</td>
                                    <td class="text-end text-danger">{{.FormatMoney .NOTPAY_AMNT}}</td>
                                    <td class="text-danger fw-bold">{{.STNPY}} -> {{.NOTPAY_COUNT}}</td> <!-- ค้างงวด -->
                                    <td class="text-danger fw-bold">{{.STNON}} -> {{.NON_COUNT}}</td> <!-- Non-->
                                    <td class="text-end">{{.FormatMoney .PRICE}}</td>
                                    <td>{{.PAYDUE_COUNT}}</td> 
                                    <td class="text-end">{{.FormatMoney .PAYAMNT}}</td>
                                    <td class="text-end fw-bold">{{.FormatMoney .BL_DUE_1}}</td>
                                    <td class="text-primary fw-bold">{{printf "%.2f" .GetPaidPercent}}%</td> <!-- ชำระไปแล้ว % -->
                                    <td class="text-start">
                                        <span class="text-muted small">{{.GetXStatusText}}</span> <span class="fw-bold text-primary">{{.GetLockStatusText}}</span>
                                    </td>
                                    <td>{{.ZONE_CODE}}</td>
                                    <td>เขต{{.DF_AMNAME}}</td> <!-- ชื่อเขต -->
                                    <td>{{.DF_PRNAME}}</td> <!-- จังหวัดเขต -->
                                    <td class="text-start">{{.DF_ADDRHOME}}</td>
                                    <td>{{.DF_TUNAME}}</td>
                                    <td>{{.DF_AMNAME}}</td>
                                    <td>{{.DF_PRNAME}}</td>
                                    <td>{{.OCCUPATION_NAME}}</td> <!-- อาชีพ -->
                                    <td>{{.BRAND_NAME}}</td>
                                    <td>{{.FML_NAME}}</td>
                                    <td></td> <!-- ประเภทหนี้ -->
                                </tr>
                                {{end}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </main>
      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>
    {{template "backend_js" .}}
    <script>
      $(document).ready(function() {
          $('#reportTable').DataTable({
              "language": {
                  "url": "https://cdn.datatables.net/plug-ins/1.10.24/i18n/Thai.json",
                  "emptyTable": '<div class="py-4 text-center text-muted"><i class="bi bi-file-earmark-x display-6 d-block mb-2"></i>ไม่พบข้อมูลรายงาน</div>'
              },
              "layout": {
                  "topStart": "buttons"
              },
              "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"]]
          });
      });
    </script>
    </script>
  </body>
</html>