<!doctype html>
<html lang="en">
  <head>
    {{template "backend_head" .}}
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.7/datatables.min.css" rel="stylesheet">
  </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="/ehongmd/main">หน้าหลัก</a></li>
                  <li class="breadcrumb-item"><a href="#">ระบบเช่าสถานที่</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="card card-primary card-outline mb-4">
              <div class="card-header">
                <div class="card-title">บันทึกข้อมูลการจ่ายค่าเช่าสถานที่</div>
              </div>
              <form id="paymentForm" action="/save_location_rf" method="POST" enctype="multipart/form-data">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="locationSelect" class="form-label">ชื่อสถานที่</label>
                      <select class="form-select" id="locationSelect" name="rapId" required>
                        <option value="">-- เลือกสถานที่ --</option>
                        {{range .Locations}}
                        <option value="{{.RAP_ID}}" data-idname="{{.RAP_IDNAME}}" data-price="{{.RAP_PRICE}}">{{.RAP_NAME}}</option>
                        {{end}}
                      </select>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="locationCode" class="form-label">รหัสสถานที่</label>
                      <input type="text" class="form-control" id="locationCode" name="rapIdName" readonly placeholder="ระบบจะแสดงรหัสสถานที่อัตโนมัติ" required>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="rentalPrice" class="form-label">ค่าเช่าที่กำหนดไว้</label>
                      <div class="input-group">
                        <input type="text" class="form-control" id="rentalPrice" readonly placeholder="0.00">
                        <span class="input-group-text">บาท</span>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="payAmount" class="form-label">ระบุจำนวนเงิน</label>
                      <div class="input-group">
                        <input type="number" class="form-control" id="payAmount" name="payAmount" placeholder="ระบุจำนวนเงิน" min="0" step="0.01" required>
                        <span class="input-group-text">บาท</span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="payMonth" class="form-label">เลือกเดือนที่จะจ่าย</label>
                      <select class="form-select" id="payMonth" name="rfM" required>
                        <option value="">-- เลือกเดือน --</option>
                        <option value="1">มกราคม</option>
                        <option value="2">กุมภาพันธ์</option>
                        <option value="3">มีนาคม</option>
                        <option value="4">เมษายน</option>
                        <option value="5">พฤษภาคม</option>
                        <option value="6">มิถุนายน</option>
                        <option value="7">กรกฎาคม</option>
                        <option value="8">สิงหาคม</option>
                        <option value="9">กันยายน</option>
                        <option value="10">ตุลาคม</option>
                        <option value="11">พฤศจิกายน</option>
                        <option value="12">ธันวาคม</option>
                      </select>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="payYear" class="form-label">เลือกปีที่จะจ่าย</label>
                      <select class="form-select" id="payYear" name="rfY" required>
                        <option value="">-- เลือกปี --</option>
                      </select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12 mb-3">
                      <label for="rfNote" class="form-label">หมายเหตุ</label>
                      <textarea class="form-control" id="rfNote" name="rfNote" rows="2" placeholder="กรอกหมายเหตุ (ถ้ามี)"></textarea>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12 mb-3">
                      <label for="paymentSlip" class="form-label">แนบหลักฐานการโอนเงิน (รูปภาพ)</label>
                      <input class="form-control" type="file" id="paymentSlip" name="rfImg" accept="image/*">
                      <div class="form-text text-muted">รองรับไฟล์รูปภาพเท่านั้น (PNG, JPG, JPEG)</div>
                      <div class="mt-3 text-center d-none" id="slipPreviewContainer">
                        <img id="slipPreview" src="#" alt="ตัวอย่างรูปหลักฐานการโอนเงิน" class="img-thumbnail" style="max-height: 250px;">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer text-end">
                  <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> บันทึกข้อมูล</button>
                  <button type="reset" class="btn btn-secondary" id="btnReset"><i class="bi bi-x-circle me-1"></i> ยกเลิก</button>
                </div>
              </form>
            </div>

            <!-- ตารางแสดงข้อมูลประวัติการจ่ายค่าเช่า -->
            <div class="card card-outline card-info mb-4">
              <div class="card-header">
                <div class="card-title">ประวัติการจ่ายค่าเช่าสถานที่ทั้งหมด (LOCATION_RF)</div>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table id="paymentTable" class="table table-striped table-hover mb-0">
                    <thead class="table-light">
                      <tr>
                        <th class="text-center" style="width: 50px">ID</th>
                        <th>รหัสสถานที่</th>
                        <th>ชื่อสถานที่</th>
                        <th class="text-end">จำนวนเงิน</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" style="width: 100px">จัดการ</th>
                      </tr>
                    </thead>
                    <tbody>
                      {{range .RFPayments}}
                      <tr>
                        <td class="text-center">{{.RF_ID}}</td>
                        <td><span class="badge text-bg-primary">{{.RAP_IDNAME}}</span></td>
                        <td>{{.RAP_NAME}}</td>
                        <td class="text-end text-success fw-bold">{{if .RF_PRICE}}{{.RF_PRICE}}{{else}}0.00{{end}} ฿</td>
                        <td class="text-center">
                          {{if eq .RF_M "1"}}มกราคม
                          {{else if eq .RF_M "2"}}กุมภาพันธ์
                          {{else if eq .RF_M "3"}}มีนาคม
                          {{else if eq .RF_M "4"}}เมษายน
                          {{else if eq .RF_M "5"}}พฤษภาคม
                          {{else if eq .RF_M "6"}}มิถุนายน
                          {{else if eq .RF_M "7"}}กรกฎาคม
                          {{else if eq .RF_M "8"}}สิงหาคม
                          {{else if eq .RF_M "9"}}กันยายน
                          {{else if eq .RF_M "10"}}ตุลาคม
                          {{else if eq .RF_M "11"}}พฤศจิกายน
                          {{else if eq .RF_M "12"}}ธันวาคม
                          {{else}}{{.RF_M}}{{end}}
                        </td>
                        <td class="text-center">ปี {{.RF_Y}}</td>
                        <td>{{if .RF_NOTE}}{{.RF_NOTE}}{{else}}<span class="text-muted">-</span>{{end}}</td>
                        <td>{{if .RF_NOTE_P}}{{.RF_NOTE_P}}{{else}}<span class="text-muted">-</span>{{end}}</td>
                        <td class="text-center">
                          {{if .RF_IMG}}
                          <a href="/images/slips/{{.RF_IMG}}" target="_blank">
                            <img src="/images/slips/{{.RF_IMG}}" alt="สลิป" class="img-thumbnail" style="max-height: 40px; cursor: pointer;">
                          </a>
                          {{else}}
                          <span class="text-muted"><i class="bi bi-image"></i> ไม่มีรูปภาพ</span>
                          {{end}}
                        </td>
                        <td class="text-center">
                          <button class="btn btn-sm btn-warning text-white" onclick="editPayment('{{.RF_ID}}', '{{.RAP_NAME}}', '{{.RAP_IDNAME}}', '{{.RAP_PRICE}}', '{{.RF_M}}', '{{.RF_Y}}', '{{.RF_IMG}}', '{{.RF_PRICE}}', '{{.RF_NOTE}}', '{{.RF_NOTE_P}}')">
                            <i class="bi bi-pencil-square"></i> แก้ไข
                          </button>
                        </td>
                      </tr>
                      {{else}}
                      <tr>
                        <td colspan="10" class="text-center py-4 text-muted">ไม่พบข้อมูลประวัติการจ่ายเงิน</td>
                      </tr>
                      {{end}}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Edit Modal -->
        <div class="modal fade" id="editModal" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <form id="editPaymentForm" action="/update_location_rf" method="POST" enctype="multipart/form-data">
                <div class="modal-header">
                  <h5 class="modal-title">แก้ไขข้อมูลการจ่ายค่าเช่า</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  <input type="hidden" id="edit_rfId" name="rfId">
                  
                  <div class="mb-3">
                    <label for="edit_locationName" class="form-label">ชื่อสถานที่</label>
                    <input type="text" class="form-control" id="edit_locationName" readonly>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_locationCode" class="form-label">รหัสสถานที่</label>
                    <input type="text" class="form-control" id="edit_locationCode" name="rapIdName" readonly required>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_rentalPrice" class="form-label">ค่าเช่าที่กำหนดไว้</label>
                    <div class="input-group">
                      <input type="text" class="form-control" id="edit_rentalPrice" readonly>
                      <span class="input-group-text">บาท</span>
                    </div>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_payAmount" class="form-label">ระบุจำนวนเงิน</label>
                    <div class="input-group">
                      <input type="number" class="form-control" id="edit_payAmount" name="payAmount" min="0" step="0.01" required>
                      <span class="input-group-text">บาท</span>
                    </div>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_payMonth" class="form-label">เลือกเดือนที่จะจ่าย</label>
                    <select class="form-select" id="edit_payMonth" name="rfM" required>
                      <option value="">-- เลือกเดือน --</option>
                      <option value="1">มกราคม</option>
                      <option value="2">กุมภาพันธ์</option>
                      <option value="3">มีนาคม</option>
                      <option value="4">เมษายน</option>
                      <option value="5">พฤษภาคม</option>
                      <option value="6">มิถุนายน</option>
                      <option value="7">กรกฎาคม</option>
                      <option value="8">สิงหาคม</option>
                      <option value="9">กันยายน</option>
                      <option value="10">ตุลาคม</option>
                      <option value="11">พฤศจิกายน</option>
                      <option value="12">ธันวาคม</option>
                    </select>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_payYear" class="form-label">เลือกปีที่จะจ่าย</label>
                    <select class="form-select" id="edit_payYear" name="rfY" required>
                      <option value="">-- เลือกปี --</option>
                    </select>
                  </div>
                  
                  <div class="mb-3">
                    <label for="edit_rfNote" class="form-label">หมายเหตุการจ่ายเดิม</label>
                    <textarea class="form-control" id="edit_rfNote" readonly rows="2"></textarea>
                  </div>

                  <div class="mb-3">
                    <label for="edit_rfNoteP" class="form-label">หมายเหตุแก้ไข</label>
                    <textarea class="form-control" id="edit_rfNoteP" name="rfNoteP" rows="2" placeholder="กรอกหมายเหตุการแก้ไข (ถ้ามี)"></textarea>
                  </div>

                  <div class="mb-3">
                    <label for="edit_paymentSlip" class="form-label">แนบหลักฐานการโอนเงินใหม่ (รูปภาพ - ไม่บังคับ)</label>
                    <input class="form-control" type="file" id="edit_paymentSlip" name="rfImg" accept="image/*">
                    <div class="form-text text-muted">หากไม่ต้องการเปลี่ยนรูปภาพ ไม่ต้องเลือกไฟล์</div>
                    <div class="mt-3 text-center" id="edit_slipPreviewContainer">
                      <img id="edit_slipPreview" src="#" alt="ตัวอย่างรูปภาพสลิป" class="img-thumbnail" style="max-height: 200px; display: none;">
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> บันทึกการเปลี่ยนแปลง</button>
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
      <footer class="app-footer">
        {{template "backend_footer" .}}
      </footer>
    </div>
    
    {{template "backend_js" .}}
    <!-- jQuery & DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.7/datatables.min.js"></script>
    
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const locationSelect = document.getElementById("locationSelect");
        const locationCodeInput = document.getElementById("locationCode");
        const rentalPriceInput = document.getElementById("rentalPrice");
        const payAmountInput = document.getElementById("payAmount");
        const payMonthSelect = document.getElementById("payMonth");
        const payYearSelect = document.getElementById("payYear");
        const paymentSlip = document.getElementById("paymentSlip");
        const slipPreviewContainer = document.getElementById("slipPreviewContainer");
        const slipPreview = document.getElementById("slipPreview");
        const btnReset = document.getElementById("btnReset");

        // Handle URL Parameters for Alerts
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('success')) {
          const val = urlParams.get('success');
          if (val === 'save') {
            alert('บันทึกข้อมูลการจ่ายค่าเช่าเรียบร้อยแล้ว');
          } else if (val === 'delete') {
            alert('ลบประวัติการจ่ายค่าเช่าเรียบร้อยแล้ว');
          } else if (val === 'update') {
            alert('แก้ไขข้อมูลการจ่ายค่าเช่าเรียบร้อยแล้ว');
          }
          window.history.replaceState(null, null, window.location.pathname);
        } else if (urlParams.has('error')) {
          alert('เกิดข้อผิดพลาดในการดำเนินงาน กรุณาลองใหม่อีกครั้ง');
          window.history.replaceState(null, null, window.location.pathname);
        }

        // Initialize DataTable
        $('#paymentTable').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.13.7/i18n/th.json"
            },
            "order": [[0, "desc"]] // เรียงตาม ID ใหม่สุดขึ้นก่อน
        });

        function clearDetails() {
          locationCodeInput.value = "";
          rentalPriceInput.value = "";
          payAmountInput.value = "";
        }

        locationSelect.addEventListener("change", function() {
          const selectedOption = this.options[this.selectedIndex];
          if (selectedOption && selectedOption.value !== "") {
            const idname = selectedOption.getAttribute("data-idname") || "";
            const price = parseFloat(selectedOption.getAttribute("data-price")) || 0;
            
            locationCodeInput.value = idname;
            rentalPriceInput.value = price.toFixed(2);
            payAmountInput.value = price.toFixed(2);
          } else {
            clearDetails();
          }
        });

        // Handle Image Upload Preview
        paymentSlip.addEventListener("change", function() {
          const file = this.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
              slipPreview.src = e.target.result;
              slipPreviewContainer.classList.remove("d-none");
            }
            reader.readAsDataURL(file);
          } else {
            slipPreview.src = "#";
            slipPreviewContainer.classList.add("d-none");
          }
        });

        // Set default month and year
        const now = new Date();
        const currentMonth = now.getMonth() + 1; // 1-12
        const currentYear = now.getFullYear();   // AD Year

        payMonthSelect.value = currentMonth;

        payYearSelect.innerHTML = "";
        for (let y = currentYear - 1; y <= currentYear + 2; y++) {
          const option = document.createElement("option");
          option.value = y;
          option.text = `ปี ${y + 543} (${y})`;
          if (y === currentYear) {
            option.selected = true;
          }
          payYearSelect.appendChild(option);
        }

        // Populate edit modal years
        const edit_payYear = document.getElementById("edit_payYear");
        edit_payYear.innerHTML = "";
        for (let y = currentYear - 1; y <= currentYear + 2; y++) {
          const option = document.createElement("option");
          option.value = y;
          option.text = `ปี ${y + 543} (${y})`;
          edit_payYear.appendChild(option);
        }

        const edit_locationCode = document.getElementById("edit_locationCode");
        const edit_rentalPrice = document.getElementById("edit_rentalPrice");
        const edit_payAmount = document.getElementById("edit_payAmount");
        const edit_paymentSlip = document.getElementById("edit_paymentSlip");
        const edit_slipPreview = document.getElementById("edit_slipPreview");

        edit_paymentSlip.addEventListener("change", function() {
          const file = this.files[0];
          if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
              edit_slipPreview.src = e.target.result;
              edit_slipPreview.style.display = "inline-block";
            }
            reader.readAsDataURL(file);
          } else {
            edit_slipPreview.src = "#";
            edit_slipPreview.style.display = "none";
          }
        });

        btnReset.addEventListener("click", function() {
          setTimeout(function() {
            clearDetails();
            payMonthSelect.value = currentMonth;
            payYearSelect.value = currentYear;
            paymentSlip.value = "";
            slipPreview.src = "#";
            slipPreviewContainer.classList.add("d-none");
          }, 10);
        });
      });

      function editPayment(id, rapName, rapIdName, price, rfM, rfY, rfImg, rfPrice, rfNote, rfNoteP) {
        document.getElementById('edit_rfId').value = id;
        document.getElementById('edit_locationName').value = rapName;
        document.getElementById('edit_locationCode').value = rapIdName;
        
        const basePrice = parseFloat(price) || 0;
        document.getElementById('edit_rentalPrice').value = basePrice.toFixed(2);
        
        const paidAmount = parseFloat(rfPrice || price) || 0;
        document.getElementById('edit_payAmount').value = paidAmount.toFixed(2);
        
        document.getElementById('edit_payMonth').value = rfM;
        document.getElementById('edit_payYear').value = rfY;
        document.getElementById('edit_rfNote').value = rfNote || '';
        document.getElementById('edit_rfNoteP').value = rfNoteP || '';
        
        const edit_slipPreview = document.getElementById('edit_slipPreview');
        const edit_paymentSlip = document.getElementById('edit_paymentSlip');
        edit_paymentSlip.value = ""; // clear file input
        
        if (rfImg && rfImg !== "") {
          edit_slipPreview.src = "/images/slips/" + rfImg;
          edit_slipPreview.style.display = "inline-block";
        } else {
          edit_slipPreview.src = "#";
          edit_slipPreview.style.display = "none";
        }
        
        var editModal = new bootstrap.Modal(document.getElementById('editModal'));
        editModal.show();
      }

      function deletePayment(id) {
        if (confirm('คุณแน่ใจหรือไม่ว่าต้องการลบประวัติการจ่ายค่าเช่านี้?')) {
          window.location.href = '/delete_location_rf?id=' + id;
        }
      }
    </script>
  </body>
</html>
