@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Activity Log'))
@section('content')
    @include('admin.Activity.partials.styles')

    <div class="container-fluid act-wrap">
        <div class="act-hero">
            <div class="act-hero-text">
                <h4 class="page-title mb-1">{{ __('Activity Log') }}</h4>
                <p class="text-muted mb-0">{{ __('What changed, who did it, and which module — at a glance.') }}</p>
            </div>
            <div class="act-segment">
                <a class="act-segment-item active" href="{{ route('activity.log') }}">{{ __('Activity') }}</a>
                <a class="act-segment-item" href="{{ route('activity.login') }}">{{ __('Login Details') }}</a>
            </div>
        </div>

        <div class="act-stats">
            <div class="act-stat">
                <div class="num">{{ number_format((int) ($stats['total'] ?? 0)) }}</div>
                <div class="lbl">{{ __('Total') }}</div>
            </div>
            <div class="act-stat">
                <div class="num text-success">{{ number_format((int) ($stats['today'] ?? 0)) }}</div>
                <div class="lbl">{{ __('Today') }}</div>
            </div>
            <div class="act-stat">
                <div class="num text-info">{{ number_format((int) ($stats['week'] ?? 0)) }}</div>
                <div class="lbl">{{ __('This Week') }}</div>
            </div>
            <div class="act-stat">
                <div class="num text-warning">{{ number_format((int) ($stats['users'] ?? 0)) }}</div>
                <div class="lbl">{{ __('Users') }}</div>
            </div>
        </div>

        <div class="act-panel">
            <div class="act-panel-toolbar">
                <div class="act-module-chips" role="tablist">
                    <a href="{{ route('activity.log', request()->except(['module', 'page'])) }}"
                       class="act-chip {{ ! request()->filled('module') ? 'active' : '' }}">{{ __('All') }}</a>
                    @foreach($modules as $moduleKey => $moduleLabel)
                        <a href="{{ route('activity.log', array_merge(request()->except('page'), ['module' => $moduleKey])) }}"
                           class="act-chip {{ request('module') === $moduleKey ? 'active' : '' }}">{{ $moduleLabel }}</a>
                    @endforeach
                </div>
            </div>

            <form action="{{ route('activity.log') }}" method="GET" class="act-filters">
                @if(request()->filled('module'))
                    <input type="hidden" name="module" value="{{ request('module') }}">
                @endif
                <div class="act-filters-grid">
                    <div class="act-filter-search">
                        <i class="fas fa-search"></i>
                        <input type="text" name="search" class="form-control" value="{{ request('search') }}"
                               placeholder="{{ __('Search activity, person, field…') }}">
                    </div>
                    <select name="action" class="form-control">
                        <option value="">{{ __('All actions') }}</option>
                        <option value="created" @selected(request('action') === 'created')>{{ __('Created') }}</option>
                        <option value="updated" @selected(request('action') === 'updated')>{{ __('Updated') }}</option>
                        <option value="deleted" @selected(request('action') === 'deleted')>{{ __('Deleted') }}</option>
                        <option value="login" @selected(request('action') === 'login')>{{ __('Login') }}</option>
                        <option value="logout" @selected(request('action') === 'logout')>{{ __('Logout') }}</option>
                    </select>
                    @if(auth()->user()->user_type === 'admin')
                        <select name="user_id" class="form-control select2">
                            <option value="">{{ __('Anyone') }}</option>
                            @foreach($filterUsers as $filterUser)
                                <option value="{{ $filterUser->id }}" @selected((string) request('user_id') === (string) $filterUser->id)>{{ $filterUser->name }}</option>
                            @endforeach
                        </select>
                    @endif
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" title="{{ __('From') }}">
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" title="{{ __('To') }}">
                    <div class="act-filter-actions">
                        <button type="submit" class="btn btn-primary">{{ __('Apply') }}</button>
                        <a href="{{ route('activity.log') }}" class="btn btn-light">{{ __('Reset') }}</a>
                    </div>
                </div>
            </form>

            <div class="act-feed">
                @forelse($activities as $activity)
                    @php
                        $actionClass = match ($activity->action_key ?? '') {
                            'created', 'login' => 'created',
                            'updated' => 'updated',
                            'deleted', 'logout' => 'deleted',
                            default => 'other',
                        };
                        $collapseId = 'act-chg-'.$activity->id;
                        $actorName = $activity->user?->name
                            ?? ($activity->actor_fallback ?? null)
                            ?? '—';
                        $initials = collect(preg_split('/\s+/', trim($actorName)))
                            ->filter()
                            ->take(2)
                            ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
                            ->implode('');
                        if ($initials === '' || $actorName === '—') {
                            $initials = '?';
                        }
                    @endphp
                    <article class="act-row">
                        <div class="act-rail">
                            <span class="act-dot {{ $actionClass }}"></span>
                        </div>

                        <div class="act-row-body">
                            <div class="act-row-main">
                                <div class="act-row-badges">
                                    <span class="act-pill module">{{ $activity->module_label }}</span>
                                    <span class="act-pill action {{ $actionClass }}">{{ $activity->action_label }}</span>
                                    @if(!empty($activity->reference))
                                        <span class="act-pill ref">{{ $activity->reference }}</span>
                                    @endif
                                </div>
                                <h3 class="act-row-title">{{ $activity->summary }}</h3>
                                <div class="act-row-time" title="{{ $activity->formatted_at }}">
                                    <i class="far fa-clock"></i>
                                    {{ $activity->relative_at }}
                                    <span>· {{ $activity->formatted_at }}</span>
                                    @if($activity->ip)
                                        <span class="act-ip">· {{ $activity->ip }}</span>
                                    @endif
                                </div>

                                @if(!empty($activity->change_lines))
                                    <button class="act-toggle" type="button"
                                            data-toggle="collapse" data-target="#{{ $collapseId }}"
                                            aria-expanded="false">
                                        <i class="fas fa-list-ul"></i>
                                        {{ __('What changed') }}
                                        <span class="act-count">{{ count($activity->change_lines) }}</span>
                                    </button>
                                    <div class="collapse" id="{{ $collapseId }}">
                                        <div class="act-changes">
                                            @foreach($activity->change_lines as $line)
                                                <div class="act-change-row">
                                                    <div class="act-change-field">{{ $line['field'] }}</div>
                                                    <div class="act-change-values">
                                                        @if($line['from'] !== null && $line['to'] !== null)
                                                            <span class="from">{{ $line['from'] }}</span>
                                                            <span class="arrow">→</span>
                                                            <span class="to">{{ $line['to'] }}</span>
                                                        @elseif($line['to'] !== null)
                                                            <span class="to">{{ $line['to'] }}</span>
                                                        @else
                                                            <span class="from">{{ $line['from'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <aside class="act-row-actor">
                                <div class="act-actor-card">
                                    <div class="act-avatar">{{ $initials }}</div>
                                    <div class="act-actor-info">
                                        <div class="act-actor-label">{{ __('Done by') }}</div>
                                        @include('admin.Activity.partials.employee_cell', [
                                            'name' => $actorName,
                                            'empCode' => $activity->emp_code ?? null,
                                            'branch' => $activity->branch_name ?? null,
                                            'userId' => $activity->user_id,
                                            'modal' => (bool) $activity->user,
                                        ])
                                    </div>
                                </div>
                            </aside>
                        </div>
                    </article>
                @empty
                    <div class="act-empty">
                        <div class="act-empty-icon"><i class="far fa-folder-open"></i></div>
                        <div class="act-empty-title">{{ __('No activity found') }}</div>
                        <div class="act-empty-sub">{{ __('Try another module or clear filters.') }}</div>
                        <a href="{{ route('activity.log') }}" class="btn btn-sm btn-outline-primary mt-2">{{ __('Reset filters') }}</a>
                    </div>
                @endforelse
            </div>

            @if($activities->hasPages())
                <div class="act-footer">
                    <div class="text-muted small">
                        {{ __('Showing') }}
                        {{ $activities->firstItem() }}–{{ $activities->lastItem() }}
                        {{ __('of') }}
                        {{ number_format($activities->total()) }}
                    </div>
                    <div>{{ $activities->links() }}</div>
                </div>
            @endif
        </div>
    </div>

    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table mb-0">
                        <thead>
                        <tr>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Email') }}</th>
                            <th>{{ __('Phone') }}</th>
                            <th>{{ __('Role') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td id="name"></td>
                            <td id="email"></td>
                            <td id="phone"></td>
                            <td id="user_type"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.select2').select2({
                width: '100%',
                placeholder: '{{ __('Anyone') }}',
                allowClear: true
            });

            $('#userModal').on('show.bs.modal', function (event) {
                var link = $(event.relatedTarget);
                var userId = link.attr('href').split('/').pop();

                $.ajax({
                    url: '{{ url('admin/users/modals') }}/' + userId,
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        $('#name').text(response.name || '—');
                        $('#email').text(response.email || '—');
                        $('#phone').text(response.phone || '—');
                        $('#user_type').text(response.user_type || '—');
                        $('#userModalLabel').text((response.name || '{{ __('User') }}') + ' {{ __('Details') }}');
                    }
                });
            });
        });
    </script>
@endsection