<!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 action="/save_location_rap" method="POST">
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <label for="locationName" class="form-label">ชื่อสถานที่</label>
                      <input type="text" class="form-control" id="locationName" name="locationName" placeholder="ระบุชื่อสถานที่" required>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="rentalPrice" class="form-label">ราคาเช่าที่</label>
                      <div class="input-group">
                        <input type="number" class="form-control" id="rentalPrice" name="rentalPrice" 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="province" class="form-label">จังหวัด</label>
                      <select class="form-select" id="province" name="province" required>
                        <option value="">-- เลือกจังหวัด --</option>
                        {{range .Provinces}}
                        <option value="{{.PR_CODE}}">{{.PR_NAME}}</option>
                        {{end}}
                      </select>
                    </div>
                    <div class="col-md-6 mb-3">
                      <label for="status" class="form-label">สถานะ</label>
                      <select class="form-select" id="status" name="status" required>
                        <option value="">-- เลือกสถานะ --</option>
                        {{range .Statuses}}
                        <option value="{{.RAP_ID}}">{{.RAP_NAMESTATUS}}</option>
                        {{end}}
                      </select>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12 mb-3">
                      <label for="rapNote" class="form-label">หมายเหตุ</label>
                      <textarea class="form-control" id="rapNote" name="rapNote" rows="2" placeholder="ระบุหมายเหตุ (ไม่บังคับ)"></textarea>
                    </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"><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">ข้อมูลสถานที่ทั้งหมด</div>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table id="locationTable" 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>จังหวัด</th>
                        <th class="text-center">สถานะ</th>
                        <th>หมายเหตุ</th>
                        <th class="text-center" style="width: 100px">จัดการ</th>
                      </tr>
                    </thead>
                    <tbody>
                      {{range .Locations}}
                      <tr>
                        <td class="text-center">{{.RAP_ID}}</td>
                        <td><span class="badge text-bg-primary">{{.RAP_IDNAME}}</span></td>
                        <td>{{.RAP_NAME}}</td>
                        <td class="text-end">{{printf "%.2f" .RAP_PRICE}} ฿</td>
                        <td>{{.PR_NAME}}</td>
                        <td class="text-center">
                          {{if eq .RAP_NAMESTATUS "เปิดใช้งาน"}}
                            <span class="badge text-bg-success">{{.RAP_NAMESTATUS}}</span>
                          {{else}}
                            <span class="badge text-bg-secondary">{{.RAP_NAMESTATUS}}</span>
                          {{end}}
                        </td>
                        <td>{{if .RAP_NOTE}}{{.RAP_NOTE}}{{else}}<span class="text-muted">-</span>{{end}}</td>
                        <td class="text-center">
                          <button class="btn btn-sm btn-warning" onclick="editLocation('{{.RAP_ID}}', '{{.RAP_IDNAME}}', '{{.RAP_NAME}}', '{{.RAP_PRICE}}', '{{.PR_CODE}}', '{{.RAP_STATUS}}', '{{.RAP_NOTE}}')">
                            <i class="bi bi-pencil-square"></i>
                          </button>
                          <button class="btn btn-sm btn-danger" onclick="deleteLocation('{{.RAP_ID}}')">
                            <i class="bi bi-trash"></i>
                          </button>
                        </td>
                      </tr>
                      {{else}}
                      <tr>
                        <td colspan="8" 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 action="/update_location_rap" method="POST">
                <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_rapId" name="rapId">
                  <div class="mb-3">
                     <label class="form-label">รหัสสถานที่</label>
                     <input type="text" class="form-control" id="edit_rapIdName" disabled>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">ชื่อสถานที่</label>
                     <input type="text" class="form-control" id="edit_locationName" name="locationName" required>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">ราคาเช่าที่</label>
                     <input type="number" class="form-control" id="edit_rentalPrice" name="rentalPrice" step="0.01" required>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">จังหวัด</label>
                     <select class="form-select" id="edit_province" name="province" required>
                       <option value="">-- เลือกจังหวัด --</option>
                       {{range .Provinces}}
                       <option value="{{.PR_CODE}}">{{.PR_NAME}}</option>
                       {{end}}
                     </select>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">สถานะ</label>
                     <select class="form-select" id="edit_status" name="status" required>
                       <option value="">-- เลือกสถานะ --</option>
                       {{range .Statuses}}
                       <option value="{{.RAP_ID}}">{{.RAP_NAMESTATUS}}</option>
                       {{end}}
                     </select>
                  </div>
                  <div class="mb-3">
                     <label class="form-label">หมายเหตุ</label>
                     <textarea class="form-control" id="edit_rapNote" name="rapNote" rows="2"></textarea>
                  </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 urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('success')) {
          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
        $('#locationTable').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.13.7/i18n/th.json"
            },
            "order": [[0, "desc"]] // เรียงตาม ID ใหม่สุดขึ้นก่อน
        });
      });

      function editLocation(id, idName, name, price, prCode, status, note) {
        document.getElementById('edit_rapId').value = id;
        document.getElementById('edit_rapIdName').value = idName;
        document.getElementById('edit_locationName').value = name;
        document.getElementById('edit_rentalPrice').value = price;
        document.getElementById('edit_province').value = prCode;
        document.getElementById('edit_status').value = status;
        document.getElementById('edit_rapNote').value = note || '';
        var editModal = new bootstrap.Modal(document.getElementById('editModal'));
        editModal.show();
      }

      function deleteLocation(id) {
        if (confirm('คุณแน่ใจหรือไม่ว่าต้องการลบสถานที่นี้?')) {
          window.location.href = '/delete_location_rap?id=' + id;
        }
      }
    </script>
  </body>
</html>
