@extends('layout.admin')
@section('content')

<!-- Page Header -->
<div class="adm-page-header fade-up">
    <div>
        <div class="adm-page-title">
            <div class="title-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);"><i class="fas fa-list-check"></i></div>
            অ্যাক্টিভিটি লগ (Audit Trail)
        </div>
        <div class="adm-page-subtitle">সিস্টেম ব্যবহারকারীদের কার্যকলাপের রেকর্ড ও মনিটরিং লগ</div>
    </div>
</div>

<div class="row fade-up">
    <div class="col-12">
        <div class="pm-card">
            <div class="pm-card-header" style="justify-content: space-between;">
                <div class="pm-card-title">
                    <div class="pm-card-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
                        <i class="fas fa-history"></i>
                    </div>
                    লগ রেকর্ডসমূহ (মোট: {{ logs.total }})
                </div>
            </div>
            <div class="pm-card-body" style="padding: 0;">
                <div class="table-responsive">
                    <table class="pm-table">
                        <thead>
                            <tr>
                                <th>আইডি</th>
                                <th>ব্যবহারকারী</th>
                                <th>কার্যকলাপ (Action)</th>
                                <th>বিবরণ (Description)</th>
                                <th>আইপি অ্যাড্রেস</th>
                                <th>ইউজার এজেন্ট (Browser/OS)</th>
                                <th>তারিখ ও সময়</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(len(logs) == 0)
                            <tr>
                                <td colspan="7" style="text-align: center; padding: 30px; color: var(--tx-3);">
                                    <i class="fas fa-folder-open" style="font-size: 24px; margin-bottom: 8px; display: block;"></i>
                                    কোনো অ্যাক্টিভিটি লগ পাওয়া যায়নি
                                </td>
                            </tr>
                            @endif
                            @foreach(log in logs)
                            <tr>
                                <td style="font-weight: 700;">#{{ log.get('id') }}</td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div class="tbl-avatar" style="width:24px; height:24px; font-size:10px; border-radius:6px;">{{ log.get('user_name')[0].upper() }}</div>
                                        <span style="font-weight: 600; color: var(--tx-1);">{{ log.get('user_name') }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="tbl-badge" style="background: rgba(59,130,246,0.1); color: var(--purple); font-weight:700; border: 1px solid rgba(59,130,246,0.2);">
                                        {{ log.get('action') }}
                                    </span>
                                </td>
                                <td style="max-width: 250px; white-space: normal; color: var(--tx-2);">{{ log.get('description') }}</td>
                                <td style="font-family: monospace; color: var(--tx-3);">{{ log.get('ip_address') }}</td>
                                <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tx-3);" title="{{ log.get('user_agent') }}">
                                    {{ log.get('user_agent') }}
                                </td>
                                <td style="color: var(--tx-2); font-size: 13px;">{{ log.get('created_at') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {!! logs.links() !!}
            </div>
        </div>
    </div>
</div>

@endsection