@extends('layouts.app')

@section('title', 'Log Aktivitas Sistem')

@section('content')
    <div class="container py-4">
        <div class="row mb-4 align-items-end" data-aos="fade-down">
            <div class="col-md-8">
                <span class="badge bg-info text-dark px-3 py-2 rounded-pill mb-2 fw-bold tracking-wide">SYSTEM
                    MONITORING</span>
                <h3 class="fw-bolder mb-1">Laporan Log Aktivitas</h3>
                <p class="text-muted mb-0">Riwayat jejak digital seluruh pergerakan pengguna di dalam sistem SIPENSA.</p>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <div class="btn-group shadow-sm hover-lift">
                    <a href="{{ route('dashboard.logs.export', ['type' => 'csv']) }}"
                        class="btn btn-success fw-bold px-4 rounded-start-pill">
                        <i class="bi bi-file-earmark-excel-fill me-2"></i>Export Excel
                    </a>
                    <a href="{{ route('dashboard.logs.export_pdf') }}" class="btn btn-danger fw-bold px-4 rounded-end-pill">
                        <i class="bi bi-file-earmark-pdf-fill me-2"></i>Export PDF
                    </a>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden" data-aos="fade-up">
            <div
                class="card-header bg-white border-bottom pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
                <h6 class="fw-bolder text-dark mb-0"><i class="bi bi-card-list text-info me-2"></i>Riwayat Aktivitas Terbaru
                </h6>

                <div class="input-group input-group-sm w-auto shadow-sm rounded-pill overflow-hidden">
                    <span class="input-group-text bg-light border-0"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" class="form-control border-0 bg-light" placeholder="Cari user atau aksi...">
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-uppercase text-secondary fw-bold small py-3 ps-4">Waktu (Timestamp)</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3">Pengguna</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3">Modul / Fitur</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3">Deskripsi Aktivitas</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hover-lift-subtle">
                                <td class="ps-4 py-3">
                                    <span class="fw-bold text-dark d-block">Hari ini, 10:45</span>
                                    <small class="text-muted">14 April 2026</small>
                                </td>
                                <td class="py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex justify-content-center align-items-center me-2 fw-bold"
                                            style="width: 35px; height: 35px;">S</div>
                                        <span class="fw-bold text-dark">Sales Andi</span>
                                    </div>
                                </td>
                                <td class="py-3"><span
                                        class="badge bg-light text-primary border border-primary border-opacity-25 rounded-pill px-3">Request
                                        Sampel</span></td>
                                <td class="py-3 text-secondary"><i class="bi bi-plus-circle text-success me-1"></i> Membuat
                                    request baru <strong>REQ-20260414-001</strong> untuk PT. Maju Jaya.</td>
                            </tr>

                            <tr class="hover-lift-subtle">
                                <td class="ps-4 py-3">
                                    <span class="fw-bold text-dark d-block">Hari ini, 09:12</span>
                                    <small class="text-muted">14 April 2026</small>
                                </td>
                                <td class="py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex justify-content-center align-items-center me-2 fw-bold"
                                            style="width: 35px; height: 35px;">M</div>
                                        <span class="fw-bold text-dark">Marketing Budi</span>
                                    </div>
                                </td>
                                <td class="py-3"><span
                                        class="badge bg-light text-info border border-info border-opacity-25 rounded-pill px-3">Review
                                        Panel</span></td>
                                <td class="py-3 text-secondary"><i class="bi bi-check-circle text-primary me-1"></i>
                                    Melakukan <strong>Approve</strong> pada request REQ-20260413-089.</td>
                            </tr>

                            <tr class="hover-lift-subtle">
                                <td class="ps-4 py-3">
                                    <span class="fw-bold text-dark d-block">Kemarin, 16:30</span>
                                    <small class="text-muted">13 April 2026</small>
                                </td>
                                <td class="py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex justify-content-center align-items-center me-2 fw-bold"
                                            style="width: 35px; height: 35px;">A</div>
                                        <span class="fw-bold text-dark">Super Admin</span>
                                    </div>
                                </td>
                                <td class="py-3"><span
                                        class="badge bg-light text-danger border border-danger border-opacity-25 rounded-pill px-3">Manajemen
                                        User</span></td>
                                <td class="py-3 text-secondary"><i class="bi bi-person-dash text-danger me-1"></i>
                                    Menonaktifkan akun user <strong>sales_lama@cmss.com</strong>.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection