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

@section('module-content')
  {{-- 搜尋和篩選區 --}}
  <div class="row mb-3">
    <div class="col-12">
      <div class="card shadow-sm">
        <div class="card-body">
          <form id="filterForm" class="row g-3">
            {{-- 全域搜尋 --}}
            <div class="col-md-4 mb-2">
              <label class="form-label small text-muted">搜尋關鍵字</label>
              <input type="text" class="form-control" id="globalSearch" placeholder="輸入名稱、IP、訊息...">
            </div>

            {{-- 日期範圍 --}}
            <div class="col-md-3 mb-2">
              <label class="form-label small text-muted">開始日期</label>
              <input type="date" class="form-control" id="dateFrom" name="date_from">
            </div>
            <div class="col-md-3 mb-2">
              <label class="form-label small text-muted">結束日期</label>
              <input type="date" class="form-control" id="dateTo" name="date_to">
            </div>

            {{-- 操作者 --}}
            <div class="col-md-2 mb-2">
              <label class="form-label small text-muted">操作者</label>
              <input type="text" class="form-control" id="causerName" name="causer_name" placeholder="輸入名稱">
            </div>

            {{-- 按鈕 --}}
            <div class="col-md-12 d-flex align-items-end gap-2 mb-2">
              <button type="button" class="btn btn-outline-secondary" id="clearFilter">
                <i class="fas fa-times me-1"></i>清除
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  {{-- Table --}}
  <div class="row">
    <div class="col position-relative">
      <table class="table table-striped table-hover steps-datatable" id="dataTable">
        <caption class="d-none">log清單</caption>
        <thead>
          <th>{{ __('時間') }}</th>
          <th>{{ __('IP') }}</th>
          <th>{{ __('動作') }}</th>
          <th>{{ __('操作者') }}</th>
          <th>{{ __('訊息') }}</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
@endsection

@push('meta')
  <meta name="js-datatable-url" content="{{ $datatable_url }}">
@endpush

@push('module-scripts')
    @vite(['resources/js/datatable.js', 'Modules/Logger/resources/assets/js/panel/web.js'])
@endpush

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