@extends('layouts.app')
@section('title', 'Activity Log')
@section('page-title', 'Activity Log')

@section('content')

<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h5 class="mb-1" style="font-weight:700; font-size:17px;">Digital Fingerprint</h5>
        <p class="mb-0" style="color:var(--lp-muted); font-size:13px;">Complete audit trail of all system actions</p>
    </div>
</div>

{{-- Filters --}}
<div class="lp-card mb-4">
    <div class="lp-card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="User, action, lead #…">
            </div>
            @if(!auth()->user()->isSalesRep())
            <div class="col-md-2">
                <label class="form-label">User</label>
                <select name="user_id" class="form-select" onchange="this.form.submit()">
                    <option value="">All Users</option>
                    @foreach($users as $u)
                    <option value="{{ $u->id }}" {{ request('user_id') == $u->id ? 'selected':'' }}>{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-md-2">
                <label class="form-label">Action</label>
                <select name="action" class="form-select" onchange="this.form.submit()">
                    <option value="">All Actions</option>
                    @foreach($actions as $key => $label)
                    <option value="{{ $key }}" {{ request('action') === $key ? 'selected':'' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">From</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control">
            </div>
            <div class="col-md-2">
                <label class="form-label">To</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control">
            </div>
            <div class="col-md-1 d-flex gap-2">
                <button type="submit" class="btn btn-primary" style="border-radius:9px;"><i class="bi bi-funnel"></i></button>
                <a href="{{ route('activity.index') }}" class="btn btn-outline-secondary" style="border-radius:9px;"><i class="bi bi-x-circle"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Log Table --}}
<div class="lp-card">
    <div class="lp-card-header">
        <span><i class="bi bi-shield-check me-2 text-primary"></i>Activity Records</span>
        <span style="font-size:12px; color:var(--lp-muted);">{{ $logs->total() }} records</span>
    </div>
    @if($logs->isNotEmpty())
    <div class="table-responsive">
        <table class="lp-table">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Role</th>
                    <th>Action</th>
                    <th>Description</th>
                    <th>Subject</th>
                    <th>IP Address</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody>
                @foreach($logs as $log)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($log->user_name) }}&background=4F7CFF&color=fff&size=64&bold=true"
                                 class="avatar-sm" alt="">
                            <span style="font-weight:600; font-size:13px;">{{ $log->user_name }}</span>
                        </div>
                    </td>
                    <td>
                        @php
                            $roleColors = ['super_admin'=>'danger','manager'=>'primary','sales_rep'=>'success'];
                            $roleLabels = ['super_admin'=>'Super Admin','manager'=>'Manager','sales_rep'=>'Sales Rep'];
                            $rc = $roleColors[$log->user_role] ?? 'secondary';
                        @endphp
                        <span class="lp-badge bg-{{ $rc }} bg-opacity-15 text-{{ $rc }}" style="font-size:10.5px;">
                            {{ $roleLabels[$log->user_role] ?? $log->user_role }}
                        </span>
                    </td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <span class="activity-icon {{ $log->action_color }}" style="width:26px;height:26px;font-size:11px;">
                                <i class="bi {{ $log->action_icon }}"></i>
                            </span>
                            <span style="font-size:12.5px; font-weight:500;">{{ $log->action_label }}</span>
                        </div>
                    </td>
                    <td style="font-size:13px; max-width:250px;">{{ $log->description }}</td>
                    <td>
                        @if($log->subject_label)
                        @if($log->subject_type === 'Lead' && $log->subject_id)
                        <a href="{{ route('leads.show', $log->subject_id) }}" class="lead-number text-decoration-none">
                            {{ $log->subject_label }}
                        </a>
                        @else
                        <span class="lead-number">{{ $log->subject_label }}</span>
                        @endif
                        @else
                        <span style="color:var(--lp-muted);">—</span>
                        @endif
                    </td>
                    <td>
                        @if($log->ip_address)
                        <span class="font-mono" style="font-size:12px; color:var(--lp-muted);">{{ $log->ip_address }}</span>
                        @else
                        <span style="color:var(--lp-muted);">—</span>
                        @endif
                    </td>
                    <td style="font-size:12px; white-space:nowrap;">
                        <div>{{ $log->created_at->format('M d, Y') }}</div>
                        <div style="color:var(--lp-muted);">{{ $log->created_at->format('H:i:s') }}</div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($logs->hasPages())
    <div class="d-flex align-items-center justify-content-between px-4 py-3" style="border-top:1px solid var(--lp-border);">
        <p class="mb-0" style="font-size:13px; color:var(--lp-muted);">
            Showing {{ $logs->firstItem() }}–{{ $logs->lastItem() }} of {{ $logs->total() }}
        </p>
        {{ $logs->links('pagination::bootstrap-5') }}
    </div>
    @endif
    @else
    <div class="empty-state">
        <i class="bi bi-clock-history"></i>
        <h6 style="font-weight:600;">No activity found</h6>
        <p style="font-size:13px;">Try adjusting your filters.</p>
    </div>
    @endif
</div>

@endsection