{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h2 class="mb-0 fw-bold text-dark"><i class="bi bi-journal-text me-2 text-primary"></i>{{ l('System Audit Log', 'সিস্টেম অডিট লগ') }}</h2>
        <small class="text-muted">{{ l('Detailed activity history of all users & changes', 'সকল ব্যবহারকারীর কার্যক্রম ও পরিবর্তনের বিস্তারিত ইতিহাস') }}</small>
    </div>
    <div class="btn-group">
        <a href="/export/audit-log/csv" class="btn btn-outline-success btn-sm"><i class="bi bi-filetype-csv me-1"></i>Export CSV</a>
        <a href="/export/audit-log/excel" class="btn btn-outline-success btn-sm"><i class="bi bi-file-earmark-excel me-1"></i>Export Excel</a>
        <a href="/export/audit-log/pdf" class="btn btn-outline-danger btn-sm"><i class="bi bi-file-earmark-pdf me-1"></i>Export PDF</a>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-body">
        <div class="row g-2 mb-3">
            <div class="col-md-6 col-12">
                <div class="input-group">
                    <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" id="logSearch" class="form-control" placeholder="{{ l('Search by user, action, or details...', 'ইউজার, কাজ বা বিস্তারিত লিখে খুঁজুন...') }}" autocomplete="off">
                </div>
            </div>
            <div class="col-md-3 col-6">
                <select id="roleFilter" class="form-select" onchange="filterAuditLogs()">
                    <option value="">{{ l('All Roles', 'সকল পদবি (রোল)') }}</option>
                    <option value="owner">Admin / Owner</option>
                    <option value="manager">Manager</option>
                    <option value="cashier">Cashier</option>
                    <option value="salesman">Salesman</option>
                </select>
            </div>
            <div class="col-md-3 col-6">
                <button type="button" class="btn btn-outline-secondary w-100" onclick="resetLogFilters()"><i class="bi bi-arrow-counterclockwise me-1"></i>{{ l('Reset', 'রিসেট') }}</button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="auditTable">
                <thead class="table-light">
                    <tr>
                        <th style="width: 170px;">{{ l('Date / Time', 'তারিখ ও সময়') }}</th>
                        <th style="width: 220px;">{{ l('User & Role', 'ইউজার ও রোল') }}</th>
                        <th style="width: 160px;">{{ l('Action', 'কার্যক্রম') }}</th>
                        <th>{{ l('Change Details', 'পরিবর্তনের বিস্তারিত') }}</th>
                    </tr>
                </thead>
                <tbody>
                {% for log in logs %}
                    {% set role_lower = (log.user.role if log.user and log.user.role else 'system')|lower %}
                    <tr class="log-row" data-role="{{ role_lower }}" data-search="{{ (log.user.username if log.user else 'system') ~ ' ' ~ log.action ~ ' ' ~ (log.details or '') }}">
                        <td>
                            <span class="fw-semibold text-dark small" style="font-family: monospace;">
                                <i class="bi bi-clock me-1 text-muted"></i>{{ log.created_at.strftime('%d-%m-%Y %I:%M %p') }}
                            </span>
                        </td>
                        <td>
                            {% if log.user %}
                                <div class="d-flex align-items-center gap-2">
                                    <div class="avatar-sm rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold" style="width:32px; height:32px; font-size:14px;">
                                        {{ log.user.username[0]|upper }}
                                    </div>
                                    <div>
                                        <div class="fw-bold text-dark mb-0" style="font-size:14px;">{{ log.user.username }}</div>
                                        <div>
                                            {% if role_lower in ['owner', 'admin'] %}
                                                <span class="badge bg-danger" style="font-size:10px;"><i class="bi bi-shield-check me-1"></i>Admin</span>
                                            {% elif role_lower == 'manager' %}
                                                <span class="badge bg-warning text-dark" style="font-size:10px;"><i class="bi bi-person-badge me-1"></i>Manager</span>
                                            {% elif role_lower == 'cashier' %}
                                                <span class="badge bg-info text-dark" style="font-size:10px;"><i class="bi bi-calculator me-1"></i>Cashier</span>
                                            {% elif role_lower == 'salesman' %}
                                                <span class="badge bg-secondary" style="font-size:10px;"><i class="bi bi-cart me-1"></i>Salesman</span>
                                            {% else %}
                                                <span class="badge bg-light text-dark border" style="font-size:10px;">{{ log.user.role|title }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <span class="badge bg-light text-muted border"><i class="bi bi-cpu me-1"></i>System</span>
                            {% endif %}
                        </td>
                        <td>
                            {% set act = log.action|lower %}
                            {% if 'add' in act or 'create' in act or 'import' in act %}
                                <span class="badge bg-success py-1 px-2"><i class="bi bi-plus-circle me-1"></i>{{ log.action }}</span>
                            {% elif 'edit' in act or 'update' in act or 'adjust' in act %}
                                <span class="badge bg-warning text-dark py-1 px-2"><i class="bi bi-pencil-square me-1"></i>{{ log.action }}</span>
                            {% elif 'delete' in act or 'cancel' in act or 'remove' in act %}
                                <span class="badge bg-danger py-1 px-2"><i class="bi bi-trash me-1"></i>{{ log.action }}</span>
                            {% elif 'invoice' in act or 'payment' in act or 'due' in act %}
                                <span class="badge bg-primary py-1 px-2"><i class="bi bi-receipt me-1"></i>{{ log.action }}</span>
                            {% else %}
                                <span class="badge bg-secondary py-1 px-2">{{ log.action }}</span>
                            {% endif %}
                        </td>
                        <td class="text-secondary small fw-medium">
                            {{ log.details or '-' }}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary"></i>
                            {{ l('No activity recorded yet.', 'এখনও কোনো ইউজার কার্যক্রম রেকর্ড হয়নি।') }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function filterAuditLogs() {
    let q = document.getElementById("logSearch").value.toLowerCase().trim();
    let role = document.getElementById("roleFilter").value.toLowerCase().trim();
    let rows = document.querySelectorAll(".log-row");

    rows.forEach(row => {
        let text = row.getAttribute("data-search").toLowerCase();
        let r = row.getAttribute("data-role").toLowerCase();

        let matchQuery = !q || text.includes(q);
        let matchRole = !role || r === role || (role === 'owner' && (r === 'admin' || r === 'owner'));

        if (matchQuery && matchRole) {
            row.style.display = "";
        } else {
            row.style.display = "none";
        }
    });
}

document.getElementById("logSearch").addEventListener("keyup", filterAuditLogs);

function resetLogFilters() {
    document.getElementById("logSearch").value = "";
    document.getElementById("roleFilter").value = "";
    filterAuditLogs();
}
</script>

{% endblock %}