@extends('layouts.admin')

@section('admin_content')
<div x-data="auditLogManager({{ $logs->toJson() }}, {{ $users->toJson() }})">
    <div class="page-header">
        <h1 class="page-title">Audit Logs</h1>
        <button class="btn btn-primary" @click="exportLogs()">
            <i class="fas fa-download"></i> Export Logs
        </button>
    </div>

    <div class="filter-bar card mb-4 p-3 shadow-sm">
        <div class="row align-items-end">
            <div class="col-md-5">
                <label class="form-label font-weight-bold">Select User to View Activity</label>
                <select x-model="selectedUserId" class="form-select">
                    <option value="">-- Select a User --</option>
                    <template x-for="u in userList" :key="u.id">
                        <option :value="u.id" x-text="u.name"></option>
                    </template>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Search in Logs</label>
                <input type="text" x-model="searchQuery" class="form-control" placeholder="Search description or IP...">
            </div>
            <div class="col-md-3">
                <button class="btn btn-outline-secondary w-100" @click="resetFilters()">Reset</button>
            </div>
        </div>
    </div>

    <div class="panel card shadow-sm">
        <div class="panel-body p-0">
            <template x-if="selectedUserId">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Timestamp</th>
                                <th>User</th>
                                <th>Description</th>
                                <th>Device</th>
                                <th>IP Address</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="log in filteredLogs" :key="log.id">
                                <tr>
                                    <td class="small" x-text="formatDate(log.created_at)"></td>
                                    <td>
                                        <span class="badge bg-soft-primary text-primary" x-text="log.user.name"></span>
                                    </td>
                                    <td x-text="log.description"></td>
                                    <td class="text-muted small" x-text="log.device.substring(0, 30) + '...'"></td>
                                    <td><span class="font-mono badge bg-light text-dark" x-text="log.ip"></span></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>

                    <div x-show="filteredLogs.length === 0" class="p-5 text-center">
                        <p class="text-muted">No activities found for this user with current search.</p>
                    </div>
                </div>
            </template>

            <template x-if="!selectedUserId">
                <div class="text-center py-5">
                    <i class="fas fa-history fa-4x text-light mb-3"></i>
                    <h5 class="text-muted">Select a user to display the latest 50 audit logs.</h5>
                </div>
            </template>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('auditLogManager', (initialLogs, users) => ({
            allLogs: initialLogs,
            userList: users,
            selectedUserId: '',
            searchQuery: '',

            // Reactive property to filter logs based on selected User ID and Search Query
            get filteredLogs() {
                if (!this.selectedUserId) return [];

                return this.allLogs.filter(log => {
                    const matchesUser = log.user_id == this.selectedUserId;
                    const matchesSearch = log.description.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                                          log.ip.includes(this.searchQuery);
                    return matchesUser && matchesSearch;
                });
            },

            resetFilters() {
                this.selectedUserId = '';
                this.searchQuery = '';
            },

            formatDate(dateString) {
                const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
                return new Date(dateString).toLocaleDateString('en-US', options);
            },

            exportLogs() {
                alert('Export functionality for user ' + this.selectedUserId + ' coming soon!');
            }
        }));
    });
</script>
@endpush