@extends('layouts.app')
@section('title', 'Activity Logs')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0 fw-bold">Activity Logs</h5>
    <form action="{{ route('lis.log.clear') }}" method="POST"
          onsubmit="return confirm('Clear ALL logs? This cannot be undone.')">
        @csrf @method('DELETE')
        <button class="btn btn-outline-danger btn-sm">
            <i class="bi bi-trash me-1"></i>Clear All
        </button>
    </form>
</div>

{{-- Filters --}}
<div class="card mb-4">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-sm-4 col-md-3">
                <label class="form-label mb-1" style="font-size:.8rem">Device</label>
                <select name="device_id" class="form-select form-select-sm">
                    <option value="">All Devices</option>
                    @foreach($devices as $d)
                        <option value="{{ $d->id }}" {{ request('device_id') == $d->id ? 'selected' : '' }}>
                            {{ $d->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3 col-md-2">
                <label class="form-label mb-1" style="font-size:.8rem">Mode</label>
                <select name="mode" class="form-select form-select-sm">
                    <option value="">All Modes</option>
                    <option value="buka"  {{ request('mode') === 'buka'  ? 'selected' : '' }}>BUKA</option>
                    <option value="tutup" {{ request('mode') === 'tutup' ? 'selected' : '' }}>TUTUP</option>
                </select>
            </div>
            <div class="col-sm-3 col-md-2">
                <label class="form-label mb-1" style="font-size:.8rem">Status</label>
                <select name="status" class="form-select form-select-sm">
                    <option value="">All</option>
                    <option value="success" {{ request('status') === 'success' ? 'selected' : '' }}>Success</option>
                    <option value="failed"  {{ request('status') === 'failed'  ? 'selected' : '' }}>Failed</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="{{ route('lis.log.index') }}" class="btn btn-outline-secondary btn-sm ms-1">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Device</th>
                    <th>Mode</th>
                    <th>Status</th>
                    <th>Message</th>
                    <th>Duration</th>
                    <th>Trigger</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
            @forelse($logs as $log)
            <tr>
                <td class="text-secondary" style="font-size:.8rem">{{ $log->id }}</td>
                <td class="fw-semibold">
                    {{ $log->device?->name ?? '<deleted>' }}
                    <div class="text-secondary" style="font-size:.72rem">{{ $log->device?->ip_address }}</div>
                </td>
                <td><span class="badge badge-{{ $log->mode }}">{{ strtoupper($log->mode) }}</span></td>
                <td>
                    @if($log->success)
                        <span class="badge bg-success"><i class="bi bi-check-lg me-1"></i>OK</span>
                    @else
                        <span class="badge bg-danger"><i class="bi bi-x-lg me-1"></i>FAIL</span>
                    @endif
                </td>
                <td style="font-size:.8rem; max-width:280px">
                    <span title="{{ $log->message }}">{{ Str::limit($log->message, 60) }}</span>
                </td>
                <td style="font-size:.8rem">{{ $log->duration_ms }} ms</td>
                <td>
                    <span class="badge {{ $log->triggered_by === 'schedule' ? 'bg-info text-dark' : 'bg-secondary' }}" style="font-size:.7rem">
                        {{ $log->triggered_by }}
                    </span>
                </td>
                <td style="font-size:.8rem; white-space:nowrap">
                    {{ $log->created_at->format('d/m/y H:i:s') }}
                    <div class="text-secondary" style="font-size:.7rem">{{ $log->created_at->diffForHumans() }}</div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="text-center text-secondary py-5">
                    <i class="bi bi-journal-text display-6 d-block mb-2 opacity-25"></i>
                    No logs found.
                </td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($logs->hasPages())
    <div class="card-footer border-secondary border-opacity-25">
        {{ $logs->links('pagination::bootstrap-5') }}
    </div>
    @endif
</div>

<div class="text-secondary mt-2" style="font-size:.75rem">
    Showing {{ $logs->firstItem() ?? 0 }}–{{ $logs->lastItem() ?? 0 }} of {{ $logs->total() }} entries
</div>
@endsection