@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="specialWorkDaysSearch" placeholder="搜尋...">
        </div>
      </div>
      <button type="button" class="btn btn-primary" id="add_special_day">
        <i class="fas fa-plus me-2"></i>新增特殊工作日
      </button>
    </div>
  </div>

  <div class="card-body">
    <table id="specialWorkDaysTable" class="table table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>日期</th>
          <th>工時</th>
          <th>類型</th>
          <th>描述</th>
          <th class="text-end">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 由 DataTable server-side 動態填充 -->
      </tbody>
    </table>
  </div>
</div>

<!-- 新增/編輯特殊工作日 Modal -->
<div class="modal fade" id="specialDayModal" tabindex="-1" aria-labelledby="specialDayModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="specialDayModalLabel">新增特殊工作日</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="post" id="specialDayForm">
          <input type="hidden" name="action" value="special_work_day">
          <input type="hidden" name="id" id="special_day_id">
          <div class="mb-3">
            <label for="date" class="form-label">日期</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="選擇日期" required readonly>
          </div>
          <div class="mb-3">
            <label for="work_hours" class="form-label">工時</label>
            <input type="number" class="form-control" id="work_hours" name="work_hours" step="0.5" min="0" max="24" required>
          </div>
          <div class="mb-3">
            <label for="type" class="form-label">類型</label>
            <select class="form-select" id="type" name="type" required>
              <option value="補班">補班</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">描述</label>
            <input type="text" class="form-control" id="description" name="description">
          </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="deleteSpecialDayModal" tabindex="-1" aria-labelledby="deleteSpecialDayModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteSpecialDayModalLabel">刪除特殊工作日</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>確定要刪除此特殊工作日嗎？</p>
        <form method="post" id="deleteSpecialDayForm">
          <input type="hidden" name="action" value="delete_special_work_day">
          <input type="hidden" name="id" id="delete_special_day_id">
          <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

{{-- META --}}
@push('meta')
<meta name="special-work-day-store-url" content="{{ route('api.special-work-days.store') }}">
<meta name="special-work-day-update-url" content="{{ route('api.special-work-days.update', ':id') }}">
<meta name="special-work-day-destroy-url" content="{{ route('api.special-work-days.destroy', ':id') }}">
<meta name="special-work-day-show-url" content="{{ route('api.special-work-days.show', ':id') }}">
<meta name="special-work-day-datatable-url" content="{{ route('api.special-work-days.index') }}">
@endpush

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

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