@extends('layouts.app')
@section('title', '操作紀錄 - 閱讀卡管理平台')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-journal-text me-1"></i>操作紀錄</h5>
    </div>
    <div class="card-body">
        {{-- 查詢區 --}}
        <form method="GET" action="{{ route('admin.log.index') }}" class="d-flex flex-wrap align-items-end gap-2 mb-3">
            <div>
                <label class="form-label mb-1" style="font-size:.82rem;">起始日期</label>
                <input type="date" class="form-control form-control-sm" name="startDate" value="{{ $startDate }}">
            </div>
            <div>
                <label class="form-label mb-1" style="font-size:.82rem;">結束日期</label>
                <input type="date" class="form-control form-control-sm" name="endDate" value="{{ $endDate }}">
            </div>
            <div>
                <label class="form-label mb-1" style="font-size:.82rem;">事件</label>
                <select name="event" class="form-select form-select-sm">
                    <option value="">全部</option>
                    @foreach($events as $e)
                    <option value="{{ $e }}" {{ $event == $e ? 'selected' : '' }}>{{ $e }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label mb-1" style="font-size:.82rem;">帳號/姓名/IP</label>
                <input type="text" class="form-control form-control-sm" name="keyword" value="{{ $keyword }}" placeholder="搜尋...">
            </div>
            <div>
                <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-search me-1"></i>查詢</button>
                <a href="{{ route('admin.log.index') }}" class="btn btn-sm btn-outline-secondary">清除</a>
            </div>
        </form>

        {{-- 表格 --}}
        <div class="table-responsive">
            <table class="table table-hover table-sm align-middle datatable" id="logTable">
                <thead>
                    <tr>
                        <th class="text-center" style="width:155px;">時間</th>
                        <th class="text-center" style="width:120px;">IP</th>
                        <th class="text-center" style="width:100px;">帳號</th>
                        <th class="text-center" style="width:80px;">姓名</th>
                        <th class="text-center">事件</th>
                        <th>詳細資訊</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($logs as $log)
                    <tr>
                        <td class="text-center text-muted" style="font-size:.82rem;">{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                        <td class="text-center"><code style="font-size:.8rem;">{{ $log->ip_address }}</code></td>
                        <td class="text-center fw-medium">{{ $log->user_uid }}</td>
                        <td class="text-center">{{ $log->user_name }}</td>
                        <td class="text-center">
                            @php
                                $eventColors = [
                                    '登入系統' => 'primary',
                                    '登出系統' => 'secondary',
                                    '提交製卡申請' => 'success',
                                    '審核申請' => 'warning',
                                    '變更申請狀態' => 'info',
                                    '匯出閱讀卡製卡' => 'dark',
                                    '發送通知' => 'info',
                                    '刪除使用者' => 'danger',
                                    '刪除卡片' => 'danger',
                                ];
                                $color = $eventColors[$log->event] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $color }}">{{ $log->event }}</span>
                        </td>
                        <td class="text-muted" style="font-size:.85rem;">{{ $log->details ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(function() {
    if ($.fn.dataTable.isDataTable('#logTable')) return;
    $('#logTable').DataTable({ order: [[0, 'desc']], pageLength: 50 });
});
</script>
@endpush
@endsection