@extends('user::layouts/panel')

@section('module-content')
<div class="card shadow border-0">
  <div class="card-header bg-white py-3 border-bottom-0">
    <div class="d-flex justify-content-between align-items-center">
      <div class="col-md-4">
        <div class="input-group">
          <span class="input-group-text bg-light border-end-0">
            <i class="fas fa-search text-muted"></i>
          </span>
          <input type="text" class="form-control border-start-0" id="departmentsSearch" placeholder="搜尋...">
        </div>
      </div>
      <button type="button" class="btn btn-primary" id="addDepartment">
        <i class="fas fa-plus me-2"></i>新增部門
      </button>
    </div>
  </div>

  <div class="card-body">
    <table id="departmentsTable" class="table table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>部門名稱</th>
          <th class="text-end">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 由 DataTable server-side 動態填充 -->
      </tbody>
    </table>
  </div>
</div>

<!-- 新增/編輯部門 Modal -->
<div class="modal fade" id="departmentModal" tabindex="-1" aria-labelledby="departmentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="departmentModalLabel">新增部門</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="departmentForm">
          <input type="hidden" id="departmentId">
          <div class="mb-3">
            <label for="departmentName" class="form-label">部門名稱 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="departmentName" required>
          </div>
          <div class="text-end">
            <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>
</div>

<!-- 刪除部門 Modal -->
<div class="modal fade" id="deleteDepartmentModal" tabindex="-1" aria-labelledby="deleteDepartmentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteDepartmentModalLabel">刪除部門</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>確定要刪除此部門嗎？</p>
        <form id="deleteDepartmentForm">
          <input type="hidden" id="deleteDepartmentId">
          <div class="text-end">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-danger">刪除</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('meta')
<meta name="department-index-url" content="{{ route('panel.setting.departments.index') }}">
<meta name="department-show-url" content="{{ route('panel.setting.departments.show', ':id') }}">
<meta name="department-store-url" content="{{ route('panel.setting.departments.store') }}">
<meta name="department-update-url" content="{{ route('panel.setting.departments.update', ':id') }}">
<meta name="department-destroy-url" content="{{ route('panel.setting.departments.destroy', ':id') }}">
@endpush

@push('module-scripts')
@vite('resources/js/datatable.js')
<script src="{{ Module::asset('setting:js/departments.js') }}"></script>
@endpush

@push('links')
@vite('resources/css/datatable.css')
@endpush