<!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">ระบบงาน EHONG MD</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">ระบบงาน EHONG MD</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="app-content">
          <div class="container-fluid">
            <!-- Form to select year -->
            <div class="card card-outline card-primary mb-4">
              <div class="card-header">
                <h3 class="card-title">ค้นหารายงานสรุปยอดการจ่ายค่าเช่า</h3>
              </div>
              <div class="card-body">
                <form method="GET" action="/ehongmd/ehongmd/main_1/index">
                  <div class="row align-items-end">
                    <div class="col-md-3 mb-3">
                      <label for="yearSelect" class="form-label">เลือกปี ค.ศ.</label>
                      <select class="form-select" id="yearSelect" name="year">
                        <!-- Options populated by JS -->
                      </select>
                    </div>
                    <div class="col-md-3 mb-3">
                      <label for="provinceSelect" class="form-label">จังหวัด</label>
                      <select class="form-select" id="provinceSelect" name="province">
                        <option value="">ทั้งหมด</option>
                        {{range .Provinces}}
                        <option value="{{.PR_CODE}}" {{if eq .PR_CODE $.SelectedProvince}}selected{{end}}>{{.PR_NAME}}</option>
                        {{end}}
                      </select>
                    </div>
                    <div class="col-md-3 mb-3">
                      <label for="statusSelect" class="form-label">สถานะการเช่า</label>
                      <select class="form-select" id="statusSelect" name="status">
                        <option value="">ทั้งหมด</option>
                        {{range .Statuses}}
                        <option value="{{.RAP_ID}}" {{if eq .RAP_ID $.SelectedStatus}}selected{{end}}>{{.RAP_NAMESTATUS}}</option>
                        {{end}}
                      </select>
                    </div>
                    <div class="col-md-3 mb-3">
                      <button type="submit" class="btn btn-primary w-100"><i class="bi bi-search me-1"></i> ค้นหารายงาน</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>

            <!-- Report Table -->
            <div class="card card-outline card-success shadow-sm">
                <div class="card-header">
                    <h3 class="card-title mb-0">ตารางรายงานสรุปการจ่ายค่าเช่า ปี ค.ศ. {{.SelectedYear}}</h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="reportTable" class="table table-bordered table-hover align-middle mb-0" style="white-space: nowrap; font-size: 0.9rem;">
                            <thead class="table-light text-center">
                                <tr>
                                    <th style="width: 50px;">ลำดับ</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>
                                {{range .ReportRows}}
                                <tr class="{{if eq .Location.RAP_STATUS "0"}}table-active{{end}}">
                                    <td class="text-center">{{.No}}</td>
                                    <td>{{.Location.RAP_NAME}}</td>
                                    <td class="text-center">{{if .Location.RAP_NAMESTATUS}}<span class="badge text-bg-success">{{.Location.RAP_NAMESTATUS}}</span>{{end}}</td>
                                    <td class="text-end text-primary fw-bold">{{if .Location.RAP_PRICE}}{{printf "%.0f" .Location.RAP_PRICE}}{{else}}-{{end}}</td>
                                    {{range .Payments}}
                                        {{if ne . ""}}
                                            <td class="text-end text-success fw-bold">{{.}}</td>
                                        {{else}}
                                            <td class="text-center text-muted">-</td>
                                        {{end}}
                                    {{end}}
                                </tr>
                                {{else}}
                                <tr>
                                    <td colspan="16" class="text-center py-5 text-muted">ไม่พบข้อมูลสถานที่</td>
                                </tr>
                                {{end}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </main>
      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>
    {{template "backend_js" .}}
    <!-- jQuery (Required for DataTables) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- DataTables CSS/JS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Initialize DataTable
        if (typeof $ !== 'undefined' && $.fn.DataTable) {
          $('#reportTable').DataTable({
            "language": {
              "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
            },
            "pageLength": 25,
            "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "ทั้งหมด"]]
          });
        }

        const yearSelect = document.getElementById('yearSelect');
        const currentYear = new Date().getFullYear();
        const selectedYear = parseInt("{{.SelectedYear}}") || currentYear;
        
        // Populate years from 2020 to currentYear + 2
        for (let y = currentYear + 2; y >= 2020; y--) {
          const option = document.createElement('option');
          option.value = y;
          option.textContent = y;
          if (y === selectedYear) {
            option.selected = true;
          }
          yearSelect.appendChild(option);
        }
      });
    </script>
  </body>
</html>
