<div>
    <x-title>Monitoring</x-title>

    {{-- FILTERS --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">

                {{-- Search --}}
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold small mb-1">Search Action</label>
                    <input type="text"
                           class="form-control"
                           wire:model.live.debounce.300ms="search"
                           placeholder="Search actions...">
                </div>

                {{-- User filter --}}
                <div class="col-12 col-md-3">
                    <label class="form-label fw-semibold small mb-1">User</label>
                    <select class="form-select" wire:model.live="filterUserId">
                        <option value="">All Users</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name_first }} {{ $user->name_last }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Date From --}}
                <div class="col-6 col-md-2">
                    <label class="form-label fw-semibold small mb-1">Date From</label>
                    <input type="date"
                           class="form-control"
                           wire:model.live="filterDateFrom">
                </div>

                {{-- Time From --}}
                <div class="col-6 col-md-1">
                    <label class="form-label fw-semibold small mb-1">Time From</label>
                    <input type="time"
                           class="form-control"
                           wire:model.live="filterTimeFrom">
                </div>

                {{-- Date To --}}
                <div class="col-6 col-md-2">
                    <label class="form-label fw-semibold small mb-1">Date To</label>
                    <input type="date"
                           class="form-control"
                           wire:model.live="filterDateTo">
                </div>

                {{-- Time To --}}
                <div class="col-6 col-md-1">
                    <label class="form-label fw-semibold small mb-1">Time To</label>
                    <input type="time"
                           class="form-control"
                           wire:model.live="filterTimeTo">
                </div>

                {{-- Clear --}}
                <div class="col-12 col-md-auto">
                    <button class="btn btn-outline-secondary w-100" wire:click="clearFilters">
                        <i class="mdi mdi-close me-1"></i> Clear
                    </button>
                </div>

            </div>
        </div>
    </div>

    {{-- RESULTS --}}
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
            <span class="fw-semibold">
                {{ $history->total() }} {{ Str::plural('record', $history->total()) }} found
            </span>
            <div wire:loading class="spinner-border spinner-border-sm text-secondary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>

        <div class="card-body p-0">
            @if($history->isEmpty())
                <div class="text-center p-5 text-muted">
                    <i class="mdi mdi-history" style="font-size: 48px;"></i>
                    <p class="mt-3 fw-bold">No history records match your filters.</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>User</th>
                                <th>Action</th>
                                <th>Context</th>
                                <th class="text-nowrap">Date &amp; Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($history as $item)
                                <tr>
                                    <td class="text-nowrap">
                                        @if($item->user)
                                            <span class="fw-semibold">{{ $item->user->name_first }} {{ $item->user->name_last }}</span>
                                            <div class="text-muted small">{{ $item->user->username }}</div>
                                        @else
                                            <span class="text-muted fst-italic">System</span>
                                        @endif
                                    </td>
                                    <td>{{ $item->action }}</td>
                                    <td>
                                        @if($item->context)
                                            <code class="small">{{ json_encode($item->context) }}</code>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td class="text-nowrap">
                                        <span title="{{ $item->created_at->format('d/m/Y H:i:s') }}">
                                            {{ $item->created_at->diffForHumans() }}
                                        </span>
                                        <div class="text-muted small">{{ $item->created_at->format('d/m/Y H:i') }}</div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <div class="mt-3">
        {{ $history->links() }}
    </div>
</div>
