@extends('layouts.dashboard')

@section('title', 'Session Logs')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Session Logs</h4>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form action="{{ route('dashboard.session-logs') }}" method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">User</label>
                <select class="form-select" name="user_id">
                    <option value="">All Users</option>
                    @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                        {{ $user->name }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Action</label>
                <select class="form-select" name="action">
                    <option value="">All</option>
                    <option value="login" {{ request('action') == 'login' ? 'selected' : '' }}>Login</option>
                    <option value="logout" {{ request('action') == 'logout' ? 'selected' : '' }}>Logout</option>
                    <option value="force_logout" {{ request('action') == 'force_logout' ? 'selected' : '' }}>Force Logout</option>
                    <option value="device_change" {{ request('action') == 'device_change' ? 'selected' : '' }}>Device Change</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" class="form-control" name="from_date" value="{{ request('from_date') }}">
            </div>

            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" class="form-control" name="to_date" value="{{ request('to_date') }}">
            </div>

            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Logs Table -->
<div class="card">
    <div class="card-body">
        @if($sessionLogs->isEmpty())
        <div class="text-center py-5 text-muted">
            <i class="bi bi-clock-history display-4"></i>
            <p class="mt-3">No session logs found</p>
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Action</th>
                        <th>Device ID</th>
                        <th>Device Name</th>
                        <th>App Version</th>
                        <th>IP Address</th>
                        <th>Details</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sessionLogs as $log)
                    <tr>
                        <td>{{ $log->id }}</td>
                        <td>
                            @if($log->user)
                            <a href="{{ route('dashboard.user-details', $log->user_id) }}">
                                {{ $log->user->name }}
                            </a>
                            @else
                            <span class="text-muted">Deleted User</span>
                            @endif
                        </td>
                        <td>
                            @php
                            $actionColors = [
                            'login' => 'success',
                            'logout' => 'secondary',
                            'force_logout' => 'danger',
                            'device_change' => 'warning',
                            ];
                            $color = $actionColors[$log->action] ?? 'info';
                            @endphp
                            <span class="badge bg-{{ $color }}">
                                {{ ucwords(str_replace('_', ' ', $log->action)) }}
                            </span>
                        </td>
                        <td>
                            <span class="text-truncate d-inline-block" style="max-width: 120px;"
                                title="{{ $log->device_id }}">
                                {{ $log->device_id ?? '-' }}
                            </span>
                        </td>
                        <td>{{ $log->device_name ?? '-' }}</td>
                        <td>{{ $log->app_version ?? '-' }}</td>
                        <td>{{ $log->ip_address ?? '-' }}</td>
                        <td>
                            @if($log->details)
                            <button type="button" class="btn btn-sm btn-outline-info"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-content="{{ json_encode($log->details) }}">
                                <i class="bi bi-info-circle"></i>
                            </button>
                            @else
                            -
                            @endif
                        </td>
                        <td>{{ $log->created_at->format('M d, Y H:i:s') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $sessionLogs->appends(request()->query())->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Initialize popovers
    document.addEventListener('DOMContentLoaded', function() {
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });
    });
</script>
@endpush