@extends('layouts.app')
@section('title', 'Log 紀錄')

@section('content')
  <div class="container py-4">
    <h3 class="mb-3"><i class="bi bi-journal-text me-2"></i>系統 Log 紀錄
      <small class="text-muted fs-6 fw-normal ms-2">共 {{ number_format($logs->total()) }} 筆</small>
    </h3>

    {{-- 搜尋 + 每頁筆數 --}}
    <form method="GET" class="row g-2 align-items-center mb-3">
      <div class="col-auto">
        <div class="input-group input-group-sm">
          <span class="input-group-text bg-transparent border-end-0">
            <i class="bi bi-search text-muted" style="font-size:.8rem;"></i>
          </span>
          <input type="search" name="q" class="form-control border-start-0"
                 style="width:220px;font-size:.85rem;"
                 placeholder="搜尋帳號或動作…"
                 value="{{ $q }}" autocomplete="off">
        </div>
      </div>
      <div class="col-auto">
        <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()" style="font-size:.85rem;">
          @foreach ([10, 20, 50, 100] as $n)
            <option value="{{ $n }}" {{ $perPage == $n ? 'selected' : '' }}>每頁 {{ $n }} 筆</option>
          @endforeach
        </select>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:.85rem;">搜尋</button>
        @if($q)
          <a href="{{ route('logs.index') }}" class="btn btn-sm btn-outline-danger ms-1" style="font-size:.85rem;">清除</a>
        @endif
      </div>
    </form>

    <div class="card shadow-sm">
      <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm align-middle mb-0" style="table-layout:fixed;min-width:900px;">
          <colgroup>
            <col style="width:72px;">
            <col style="width:110px;">
            <col style="width:130px;">
            <col style="width:140px;">
            <col style="width:175px;">
            <col>
          </colgroup>
          <thead class="table-light">
            <tr>
              <th class="text-center text-muted" style="font-size:.75rem;">#</th>
              <th>帳號</th>
              <th>IP</th>
              <th>平台</th>
              <th>時間</th>
              <th>動作</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($logs as $log)
              @php
                $userName = $log->user->name ?? '未知';
                $agent = strtolower($log->agent ?? '');

                if (preg_match('/(chrome|firefox|edge|safari)\/([\d\.]+)/', $agent, $m)) {
                    $browser = ucfirst($m[1]);
                } else {
                    $browser = '未知';
                }

                if (preg_match('/windows nt/', $agent)) {
                    $os = 'Windows';
                } elseif (str_contains($agent, 'macintosh')) {
                    $os = 'macOS';
                } elseif (str_contains($agent, 'android')) {
                    $os = 'Android';
                } elseif (str_contains($agent, 'iphone') || str_contains($agent, 'ios')) {
                    $os = 'iOS';
                } elseif (str_contains($agent, 'linux')) {
                    $os = 'Linux';
                } else {
                    $os = '未知';
                }

                $seq = $logs->total() - ($logs->currentPage() - 1) * $logs->perPage() - $loop->index;
              @endphp
              <tr>
                <td class="text-center text-muted" style="font-size:.75rem;">{{ number_format($seq) }}</td>
                <td class="text-nowrap overflow-hidden text-truncate" title="{{ $userName }}">{{ $userName }}</td>
                <td class="text-nowrap">{{ $log->ip_address ?? '—' }}</td>
                <td style="font-size:102%;word-break:break-word;">{{ $os }} / {{ $browser }}</td>
                <td class="text-nowrap">{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                <td style="white-space:normal;word-break:break-word;font-size:98%;">{{ $log->action_label }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
        </div>
      </div>
      @if($logs->hasPages())
      <div class="card-footer d-flex justify-content-between align-items-center py-2" style="font-size:.85rem;">
        <span class="text-muted">
          第 {{ $logs->firstItem() }}–{{ $logs->lastItem() }} 筆，共 {{ number_format($logs->total()) }} 筆
        </span>
        {{ $logs->links() }}
      </div>
      @endif
    </div>
  </div>
@endsection