<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold text-dark">
                        <i class="bi bi-clock-history me-2 text-primary"></i>Log Aktivitas Sistem
                    </h5>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-light text-primary border px-3 py-2" style="border-radius: 10px;">
                            <i class="bi bi-activity me-1"></i> 100 Aktivitas Terakhir
                        </span>
                        <button type="button" class="btn btn-sm btn-outline-danger border-0" style="border-radius: 10px;" onclick="konfirmasiHapusLog()">
                            <i class="bi bi-trash3 me-1"></i> Bersihkan Log
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="tableLog">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4 py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="font-size: 0.75rem; letter-spacing: 0.05rem;">Waktu</th>
                                    <th class="py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="font-size: 0.75rem; letter-spacing: 0.05rem;">User</th>
                                    <th class="py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="font-size: 0.75rem; letter-spacing: 0.05rem;">Tipe</th>
                                    <th class="py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="font-size: 0.75rem; letter-spacing: 0.05rem;">Aktivitas</th>
                                    <th class="py-3 text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="font-size: 0.75rem; letter-spacing: 0.05rem;">IP Address</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data populated via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* ===== DATATABLES CUSTOM ===== */
#tableLog_wrapper .dataTables_filter input {
    border-radius: 8px; border: 1.5px solid #e5e7eb; font-size:.85rem; padding: 7px 12px; outline: none;
}
#tableLog_wrapper .dataTables_filter input:focus { border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.12); }
#tableLog_wrapper .dataTables_length select {
    border-radius: 8px; border: 1.5px solid #e5e7eb; font-size:.85rem; padding: 5px 30px 5px 12px; cursor:pointer; min-width: 70px;
}
#tableLog_wrapper .dataTables_info { font-size:.8rem; color:#6b7280; padding-top: 15px; }
#tableLog_wrapper .dataTables_paginate { padding-top: 10px; }
#tableLog_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important; font-size:.8rem !important; border:none !important;
}
#tableLog_wrapper .dataTables_paginate .paginate_button.current {
    background: #0d6efd !important; color:#fff !important; border:none !important;
}
#tableLog_wrapper .dataTables_length, #tableLog_wrapper .dataTables_filter { padding: 15px 20px; }
#tableLog_wrapper .dataTables_info, #tableLog_wrapper .dataTables_paginate { padding: 15px 20px; }
</style>

<!-- Modal Konfirmasi Bersihkan Log -->
<div class="modal fade" id="modalBersihkanLog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 400px;">
        <div class="modal-content" style="border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
            <div class="modal-body text-center p-4">
                <div class="mb-3">
                    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 3rem;"></i>
                </div>
                <h5 class="fw-bold text-dark mb-2">Bersihkan Seluruh Log?</h5>
                <p class="text-secondary small mb-4">Aksi ini akan menghapus seluruh riwayat aktivitas sistem secara permanen dan tidak dapat dikembalikan.</p>
                <div class="d-flex gap-2 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal" style="border-radius: 10px; font-weight: 600;">Batal</button>
                    <a href="<?php echo base_url('log-activity/bersihkan'); ?>" class="btn btn-danger px-4" style="border-radius: 10px; font-weight: 600;">Ya, Hapus Semua</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function waitForJQuery() {
    if (typeof jQuery === 'undefined' || typeof jQuery.fn.dataTable === 'undefined') {
        return setTimeout(waitForJQuery, 50);
    }
    
    var $ = jQuery;

    $(document).ready(function() {
        $('#tableLog').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [[ 0, "desc" ]],
            "ajax": {
                "url": "<?php echo base_url('log-activity/ajax_data'); ?>",
                "type": "POST"
            },
            "columns": [
                { "data": "0" },
                { "data": "1" },
                { "data": "2" },
                { "data": "3" },
                { "data": "4" }
            ],
            "pageLength": 25,
            "language": {
                "search": "Cari Log:",
                "lengthMenu": "Tampilkan _MENU_",
                "zeroRecords": "Tidak ada data ditemukan",
                "info": "Menampilkan _START_ - _END_ dari _TOTAL_ log",
                "paginate": {
                    "first": "Pertama",
                    "last": "Terakhir",
                    "next": "Lanjut",
                    "previous": "Balik"
                },
                "processing": '<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div> Loading...'
            }
        });
    });

    var modalBersihkan = null;
    window.konfirmasiHapusLog = function() {
        if (!modalBersihkan) {
            modalBersihkan = new bootstrap.Modal(document.getElementById('modalBersihkanLog'));
        }
        modalBersihkan.show();
    }
})();
</script>
