@extends('backEnd.layouts.master')
@section('title', 'User Activity Log')

@push('styles')
<style>
.ual-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.ual-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 12px; }
.ual-table thead th {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    padding: 10px 12px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}
.ual-table tbody td {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px;
    vertical-align: middle;
}
.ual-table tbody tr:nth-child(even) { background: #f9fafb; }
.ual-table tbody tr:hover { background: #f3f4f6 !important; }
.ual-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 4px;
    border: 1px solid #6366f1;
    background: #fff;
    color: #4f46e5;
    cursor: pointer;
}
.ual-view-btn:hover { background: #eef2ff; }
.ual-module-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #374151;
}
.ual-user-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    background: #dbeafe;
    color: #1d4ed8;
}
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-clipboard-list me-2 text-primary"></i>User Activity Log</h4>
            <small class="text-muted">কোন staff user কখন কী create/update/delete করেছে — সব admin action log</small>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <form method="POST" action="{{ route('admin.activity-logs.settings') }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1"><i class="fas fa-trash-alt me-1 text-danger"></i>Auto Delete Logs</label>
                    <select name="retention_months" class="form-select form-select-sm">
                        @foreach($retentionOptions as $months)
                        <option value="{{ $months }}" {{ (int) ($logSettings['retention_months'] ?? 3) === (int) $months ? 'selected' : '' }}>
                            {{ \App\Services\ActivityLogSettingsService::retentionLabel($months) }}
                        </option>
                        @endforeach
                    </select>
                    <div class="form-text">পুরনো activity log স্বয়ংক্রিয়ভাবে মুছে ফেলা হবে। Never select করলে log থাকবে যতক্ষণ না manually delete করেন।</div>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-outline-primary btn-sm px-3">
                        <i class="fas fa-save me-1"></i>Save Retention
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <form method="POST" action="{{ route('admin.activity-logs.settings') }}" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1"><i class="fas fa-trash-alt me-1 text-danger"></i>Auto Delete Logs</label>
                    <select name="retention_months" class="form-select form-select-sm">
                        @foreach($retentionOptions as $months)
                        <option value="{{ $months }}" {{ (int) ($logSettings['retention_months'] ?? 3) === (int) $months ? 'selected' : '' }}>
                            {{ \App\Services\ActivityLogSettingsService::retentionLabel($months) }}
                        </option>
                        @endforeach
                    </select>
                    <div class="form-text">পুরনো activity log স্বয়ংক্রিয়ভাবে মুছে ফেলা হবে। Never select করলে log থাকবে যতক্ষণ না manually delete করেন।</div>
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-outline-primary btn-sm px-3">
                        <i class="fas fa-save me-1"></i>Save Retention
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">From</label>
                    <input type="date" name="from_date" value="{{ request('from_date') }}" class="form-control form-control-sm" style="width:150px">
                </div>
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">To</label>
                    <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control form-control-sm" style="width:150px">
                </div>
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">User</label>
                    <select name="user_id" class="form-select form-select-sm" style="width:170px">
                        <option value="">All Users</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ (string) request('user_id') === (string) $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">Module</label>
                    <select name="module" class="form-select form-select-sm" style="width:170px">
                        <option value="">All Modules</option>
                        @foreach($modules as $mod)
                        <option value="{{ $mod->module }}" {{ request('module') === $mod->module ? 'selected' : '' }}>{{ $mod->module_label ?: $mod->module }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">Action</label>
                    <select name="action" class="form-select form-select-sm" style="width:130px">
                        <option value="">All</option>
                        @foreach(['created','updated','deleted','posted','approved','restored','exported','printed','booked','logged_in','logged_out'] as $act)
                        <option value="{{ $act }}" {{ request('action') === $act ? 'selected' : '' }}>{{ ucfirst($act) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <label class="form-label small fw-semibold mb-1">Search</label>
                    <input type="text" name="q" value="{{ request('q') }}" class="form-control form-control-sm" placeholder="Summary, route..." style="width:180px">
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary btn-sm px-3"><i class="fas fa-filter me-1"></i>Filter</button>
                    <a href="{{ route('admin.activity-logs.index') }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="ual-panel">
        <div class="table-responsive">
            <table class="ual-table">
                <thead>
                    <tr>
                        <th style="width:140px">Date &amp; Time</th>
                        <th style="width:130px">User</th>
                        <th style="width:110px">Action</th>
                        <th style="width:130px">Module</th>
                        <th>Summary</th>
                        <th class="text-center" style="width:70px">Detail</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $log->created_at->format('d M Y') }}</div>
                            <div class="text-muted">{{ $log->created_at->format('g:i A') }}</div>
                        </td>
                        <td><span class="ual-user-badge">{{ $log->performer_name }}</span></td>
                        <td><span class="badge {{ $log->action_badge_class }}">{{ $log->action_label }}</span></td>
                        <td><span class="ual-module-badge">{{ $log->module_label ?: $log->module }}</span></td>
                        <td>
                            <div class="text-dark">{{ $log->summary }}</div>
                            @if($log->subject_id)
                            <div class="text-muted" style="font-size:10px">ID: {{ $log->subject_id }}</div>
                            @endif
                        </td>
                        <td class="text-center">
                            <button type="button" class="ual-view-btn view-log-detail" data-id="{{ $log->id }}" title="View details">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="fas fa-clipboard-list fa-2x d-block mb-2 opacity-50"></i>
                            No activity logs yet. Admin panel-এ কোনো save/delete/update করলে এখানে দেখাবে।
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($logs->hasPages())
        <div class="p-3">{{ $logs->links() }}</div>
        @endif
    </div>
</div>

<div class="modal fade" id="logDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-bold"><i class="fas fa-clipboard-list me-2 text-primary"></i>Activity Detail</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="logDetailBody">
                <div class="text-center py-4"><div class="spinner-border text-primary"></div></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const detailUrl = @json(route('admin.activity-logs.detail', ['id' => '__ID__']));
    const csrf = document.querySelector('meta[name=csrf-token]')?.content || '';

    function esc(value) {
        return String(value ?? '—').replace(/[&<>"']/g, function (c) {
            return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
        });
    }

    function renderTable(title, obj) {
        if (!obj || typeof obj !== 'object' || Object.keys(obj).length === 0) return '';
        let html = '<hr><h6 class="fw-bold text-muted small mb-2">' + esc(title) + '</h6>';
        html += '<div class="table-responsive"><table class="table table-sm table-bordered mb-0">';
        for (const [k, v] of Object.entries(obj)) {
            const val = typeof v === 'object' ? JSON.stringify(v, null, 2) : (v ?? '—');
            html += '<tr><th class="bg-light" style="width:35%;font-size:12px">' + esc(k) + '</th><td style="font-size:12px;white-space:pre-wrap">' + esc(val) + '</td></tr>';
        }
        html += '</table></div>';
        return html;
    }

    document.querySelectorAll('.view-log-detail').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const id = btn.dataset.id;
            const modal = new bootstrap.Modal(document.getElementById('logDetailModal'));
            const body = document.getElementById('logDetailBody');
            body.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary"></div></div>';
            modal.show();

            fetch(detailUrl.replace('__ID__', id), {
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
            })
                .then(function (r) { return r.json(); })
                .then(function (d) {
                    let propsHtml = '';
                    if (d.properties) {
                        propsHtml += renderTable('REQUEST DATA', d.properties.input);
                        propsHtml += renderTable('ROUTE PARAMS', d.properties.route_params);
                    }

                    body.innerHTML =
                        '<div class="row g-3 mb-2">' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Performed By</div><span class="ual-user-badge">' + esc(d.performed_by) + '</span>' +
                        (d.user_email ? '<div class="text-muted small mt-1">' + esc(d.user_email) + '</div>' : '') + '</div></div>' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Date & Time</div><div class="fw-semibold">' + esc(d.created_at) + '</div></div></div>' +
                        '<div class="col-md-4"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Action</div><span class="badge ' + esc(d.action_badge) + '">' + esc(d.action_label) + '</span></div></div>' +
                        '<div class="col-md-4"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Module</div><div class="fw-semibold">' + esc(d.module_label) + '</div></div></div>' +
                        '<div class="col-md-4"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">HTTP</div><div class="fw-semibold">' + esc(d.http_method) + ' · ' + esc(d.status_code) + '</div></div></div>' +
                        '<div class="col-12"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Summary</div><div class="fw-semibold">' + esc(d.summary) + '</div></div></div>' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Route</div><code style="font-size:11px">' + esc(d.route_name) + '</code></div></div>' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">Subject</div><div>' + esc(d.subject_type) + (d.subject_id ? ' #' + esc(d.subject_id) : '') + '</div></div></div>' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">IP Address</div><div>' + esc(d.ip_address) + '</div></div></div>' +
                        '<div class="col-md-6"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">URL</div><div style="font-size:11px;word-break:break-all">' + esc(d.url) + '</div></div></div>' +
                        (d.user_agent ? '<div class="col-12"><div class="p-3 bg-light rounded"><div class="text-muted small mb-1">User Agent</div><div style="font-size:11px">' + esc(d.user_agent) + '</div></div></div>' : '') +
                        '</div>' + propsHtml;
                })
                .catch(function () {
                    body.innerHTML = '<p class="text-danger text-center mb-0">Could not load activity detail.</p>';
                });
        });
    });
})();
</script>
@endpush