@extends('layouts.user_type.auth')
@section('activityLog')
<div class="container-fluid py-4 px-4">
    @include('components.alert')
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="mb-0" style="font-weight:700;">Activity Logs</h5>
                <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Track all user actions across the system.</p>
            </div>
            <span class="badge bg-gradient-light" style="font-size:0.7rem;">{{ $logs->total() ?? 0 }} Records</span>
        </div>
        <div class="card-body p-0">
            <div style="max-height:calc(100vh - 270px);overflow-y:auto;overflow-x:auto;border:none;">
                <table class="table mb-0" style="min-width:900px;table-layout:fixed;">
                    <thead>
                        <tr>
                            <th style="width:5%;padding-left:1.25rem;">#</th>
                            <th style="width:16%;" class="text-center">User</th>
                            <th style="width:10%;" class="text-center">User Type</th>
                            <th style="width:14%;" class="text-center">Action</th>
                            <th style="width:12%;" class="text-center">Module</th>
                            <th style="width:28%;" class="text-center">Description</th>
                            <th style="width:15%;" class="text-center">Performed At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $index => $log)
                            <tr>
                                <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($logs->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                <td class="text-center" style="max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ $log->user->name }}">
                                    <span style="font-weight:600;color:var(--heading);">{{ $log->user->name }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-gradient-light mono" style="font-size:0.64rem;">{{ $log->user->user_type }}</span>
                                </td>
                                <td class="text-center" style="max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ $log->action }}">
                                    <span style="font-weight:600;color:var(--heading);">{{ $log->action }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge" style="background:var(--g2);color:var(--grey-dark);border:1px solid var(--border);font-size:0.64rem;">{{ $log->action_module }}</span>
                                </td>
                                <td class="text-center" style="max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--grey-mid);" title="{{ $log->description }}">
                                    {{ $log->description }}
                                </td>
                                <td class="text-center">
                                    <span class="mono" style="font-size:0.72rem;color:var(--grey-mid);">{{ \Carbon\Carbon::parse($log->created_at)->format('d-m-Y') }}</span><br>
                                    <span class="mono" style="font-size:0.67rem;color:var(--grey);">{{ \Carbon\Carbon::parse($log->created_at)->format('H:i:s') }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7"><div class="empty-state"><i class="fas fa-history"></i><p>No activity logs found</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                @include('components.pagination', ['paginator' => $logs])
            </div>
        </div>
    </div>
</div>
@endsection