@extends('layouts.master')

@section('title', 'System Activity Logs')

@section('content')
<style>
    .dribbble-container {
        padding: 40px;
        background: #f9fafb;
        flex: 1;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .dribbble-card {
        background: white;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 40px;
    }
    .page-title {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
    }
    .page-desc {
        color: #6b7280;
        font-size: 13px;
        margin-bottom: 32px;
    }

    /* Modern Filter Bar */
    .compact-filters {
        display: flex;
        align-items: flex-end;
        gap: 16px;
        background: #f9fafb;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 40px;
        border: 1px solid #f3f4f6;
    }
    .filter-field {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .filter-field label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: #9ca3af;
        letter-spacing: 0.5px;
    }
    .filter-input {
        height: 38px;
        padding: 0 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 13px;
        background: white;
        outline: none;
        width: 100%;
    }
    .filter-input:focus { border-color: #3b82f6; }

    /* Timeline Styles */
    .date-group {
        position: relative;
        margin-bottom: 40px;
    }
    .date-header {
        text-align: center;
        margin-bottom: 24px;
        position: relative;
    }
    .date-header span {
        background: white;
        padding: 0 16px;
        font-size: 12px;
        font-weight: 600;
        color: #9ca3af;
        position: relative;
        z-index: 1;
    }
    .date-header::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #f3f4f6;
    }

    .log-item {
        display: flex;
        gap: 16px;
        margin-bottom: 28px;
        padding: 12px;
        border-radius: 8px;
        transition: background 0.2s;
    }
    .log-item:hover {
        background: #f9fafb;
    }
    .log-avatar {
        width: 36px;
        height: 36px;
        background: #eff6ff;
        color: #3b82f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .log-content {
        flex: 1;
    }
    .log-text {
        font-size: 14px;
        line-height: 1.5;
        color: #374151;
    }
    .log-user-name {
        font-weight: 600;
        color: #111827;
    }
    .log-user-name a {
        text-decoration: none;
        color: inherit;
    }
    .log-user-name a:hover {
        color: #3b82f6;
    }
    .log-time {
        color: #9ca3af;
        margin-left: 8px;
        font-weight: normal;
        font-size: 12px;
    }
    .log-description {
        margin-top: 4px;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.6;
    }
    .log-meta {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 11px;
    }
    .meta-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #9ca3af;
    }
    .link-blue {
        color: #3b82f6;
        text-decoration: none;
        font-weight: 500;
    }
    .link-blue:hover { text-decoration: underline; }

    .action-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        margin-left: 8px;
    }
    .action-login { background: #dcfce7; color: #16a34a; }
    .action-logout { background: #fefce8; color: #a16207; }
    .action-profile_update { background: #e0f2fe; color: #0369a1; }
    

</style>

<div class="dribbble-container">
    <div class="dribbble-card">
        <h1 class="page-title">System Activity Logs</h1>
        <p class="page-desc">Comprehensive audit trail of all manual and automated interactions within the platform.</p>

        <form action="{{ route('admin.logs') }}" method="GET" class="compact-filters">
            <div class="filter-field">
                <label>Operator</label>
                <select name="user_id" class="filter-input">
                    <option value="">All Registered Operators</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ request('user_id') == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-field">
                <label>Activity Category</label>
                <select name="action" class="filter-input">
                    <option value="">Every Action Category</option>
                    @foreach($actions as $a)
                        <option value="{{ $a }}" {{ request('action') == $a ? 'selected' : '' }}>{{ str_replace('_', ' ', $a) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-field" style="max-width: 150px;">
                <label>From Date</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}" class="filter-input">
            </div>
            <div class="filter-field" style="max-width: 150px;">
                <label>To Date</label>
                <input type="date" name="end_date" value="{{ request('end_date') }}" class="filter-input">
            </div>
            <div style="display:flex; gap:8px;">
                <button type="submit" class="btn btn-primary" style="height:38px; border-radius: 6px;" title="Apply Current Filters">
                    <i data-lucide="filter" size="14"></i>
                </button>
                <a href="{{ route('admin.logs') }}" class="btn" style="height:38px; border-radius: 6px;" title="Reset Filters">
                    <i data-lucide="rotate-ccw" size="14"></i>
                </a>
            </div>
        </form>

        @php
            $groupedLogs = $logs->groupBy(function($log) {
                return $log->created_at->format('d M, Y');
            });
        @endphp

        @forelse($groupedLogs as $date => $dayLogs)
            <div class="date-group">
                <div class="date-header">
                    <span>{{ $date }}</span>
                </div>

                @foreach($dayLogs as $log)
                    <div class="log-item">
                        <div class="log-avatar">
                            {{ strtoupper(substr($log->user->name, 0, 1)) }}
                        </div>
                        <div class="log-content">
                            <div class="log-text">
                                <span class="log-user-name">
                                    <a href="{{ route('admin.users.show', $log->user_id) }}">{{ $log->user->name }}</a>
                                </span>
                                @if($log->action == 'login')
                                    logged in to the management console
                                @elseif($log->action == 'logout')
                                    successfully signed out
                                @elseif($log->action == 'profile_update')
                                    modified <span class="link-blue">Account Settings</span>
                                @elseif($log->action == 'clicked_next')
                                    interacted with <span class="link-blue">Template Workflow</span>
                                @else
                                    executed <span class="link-blue">{{ str_replace('_', ' ', $log->action) }}</span>
                                @endif
                                <span class="log-time">• {{ $log->created_at->format('H:i') }} ({{ $log->created_at->diffForHumans() }})</span>
                                <span class="action-badge action-{{ $log->action }}">
                                    {{ str_replace('_', ' ', $log->action) }}
                                </span>
                            </div>
                            <div class="log-description">
                                {{ $log->description }}
                            </div>
                            <div class="log-meta">
                                <div class="meta-tag" title="IP Address">
                                    <i data-lucide="globe" size="12"></i>
                                    {{ $log->ip_address }}
                                </div>
                                <div class="meta-tag" title="User Agent String">
                                    <i data-lucide="monitor" size="12"></i>
                                    {{ Str::limit($log->user_agent, 60) }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @empty
            <div style="text-align: center; padding: 80px 0; color: #9ca3af;">
                <i data-lucide="search-x" size="48" style="margin-bottom: 24px; opacity: 0.5;"></i>
                <h3 style="font-size: 16px; color: #374151; font-weight: 700;">No Activity Logs Found</h3>
                <p style="font-size: 13px; margin-top: 8px;">Try adjusting your search filters to find what you're looking for.</p>
                <a href="{{ route('admin.logs') }}" class="btn" style="margin-top: 24px; display: inline-flex;">Clear All Filters</a>
            </div>
        @endforelse

        <div style="margin-top: 32px;">
            {{ $logs->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection