@extends('layouts.user.main')

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

@section('styles')
    <style>
        body {
            font-family: 'Inter', 'Poppins', sans-serif;
            background: #f9fafb;
            color: #374151 !important;
        }

        /* Modern Card Design */
        .modern-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            overflow: hidden;
        }

        .modern-card-header {
            background: white;
            border-bottom: 1px solid #e5e7eb;
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }

        .modern-card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.125rem;
            font-weight: 700;
            color: #1f2937;
            margin: 0;
        }

        .modern-card-title ion-icon {
            font-size: 24px;
            color: #165797;
        }

        .modern-card-body {
            padding: 1.5rem;
        }

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* Modern Buttons */
        .modern-btn {
            padding: 8px 35px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
        }

        .modern-btn-success {
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
        }

        .modern-btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
            color: white;
        }

        .modern-btn-info {
            background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
        }

        .modern-btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
            color: white;
        }

        .modern-btn-primary {
            background: linear-gradient(135deg, #165797 0%, #088963 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(22, 87, 151, 0.3);
        }

        .modern-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 87, 151, 0.4);
        }

        .modern-btn-secondary {
            background: #f3f4f6;
            color: #4b5563;
            border: 1px solid #d1d5db;
        }

        .modern-btn-secondary:hover {
            background: #e5e7eb;
        }

        /* Filter Section */
        .filter-section {
            background: #f9fafb;
            padding: 1.25rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            border: 1px solid #e5e7eb;
        }

        .filter-label {
            font-weight: 600;
            color: #374151;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 0.875rem;
            transition: all 0.2s ease;
            width: 100%;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #165797;
            box-shadow: 0 0 0 3px rgba(22, 87, 151, 0.1);
        }

        /* Results Info */
        .results-info {
            background: #eff6ff;
            border-left: 4px solid #165797;
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 1rem;
        }

        .results-info p {
            margin: 0;
            font-size: 0.875rem;
            color: #374151;
        }

        /* Modern Table */
        .table-responsive {
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

        .table {
            margin: 0;
        }

        .table thead th {
            background-color: #f9fafb;
            color: #374151 !important;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border: none;
            padding: 14px 12px;
        }

        .table tbody td {
            padding: 12px;
            vertical-align: middle;
            border-bottom: 1px solid #f3f4f6;
            font-size: 0.875rem;
        }

        .table tbody tr:hover {
            background: #f9fafb;
        }

        .table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Modern Badges */
        .badge {
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.75rem;
        }

        /* Action Button */
        .btn-view {
            background: linear-gradient(135deg, #165797 0%, #088963 100%);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 10px;
            transition: all 0.2s ease;
        }

        .btn-view:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 87, 151, 0.4);
            color: white;
        }

        .btn-view ion-icon {
            font-size: 18px;
            padding-top: 5px;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
        }

        .empty-state ion-icon {
            font-size: 64px;
            color: #d1d5db;
            margin-bottom: 1rem;
        }

        .empty-state p {
            color: #9ca3af;
            font-size: 1rem;
        }

        /* Pagination */
        .pagination {
            gap: 4px;
        }

        .page-item .page-link {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            color: #4b5563;
            padding: 6px 12px;
            margin: 0 2px;
            transition: all 0.2s ease;
        }

        .page-item.active .page-link {
            background: linear-gradient(135deg, #165797 0%, #088963 100%);
            border: none;
            color: white;
            font-weight: 600;
        }

        .page-item .page-link:hover {
            background: #f3f4f6;
            color: #165797;
            border-color: #d1d5db;
        }

        /* Modal */
        .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            background: linear-gradient(135deg, #165797 0%, #088963 100%);
            color: white;
            border-radius: 12px 12px 0 0;
            padding: 1.25rem 1.5rem;
            border: none;
        }

        .modal-header .modal-title {
            font-weight: 700;
            font-size: 1.125rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .modal-header .close {
            color: white;
            opacity: 0.8;
            text-shadow: none;
        }

        .modal-header .close:hover {
            opacity: 1;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .modern-card-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .header-actions {
                width: 100%;
                flex-wrap: wrap;
            }

            .modern-btn {
                flex: 1;
                justify-content: center;
            }
        }
    </style>
@endsection

@section('contents')
    <div class="content">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="modern-card">
                    <div class="modern-card-header">
                        <h5 class="modern-card-title">
                            <ion-icon name="analytics-outline"></ion-icon>
                            Activity Logs
                        </h5>
                        <div class="header-actions">
                            <a href="{{ route('user.activity-logs.export', request()->query()) }}" 
                               class="modern-btn modern-btn-success">
                                <ion-icon name="download-outline"></ion-icon> Export CSV
                            </a>
                            <a href="{{ route('user.activity-statistics') }}" 
                               class="modern-btn modern-btn-info">
                                <ion-icon name="stats-chart-outline"></ion-icon> Statistics
                            </a>
                        </div>
                    </div>
                    
                    <div class="modern-card-body">
                        {{-- Filters Section --}}
                        <form method="GET" action="{{ route('user.activity-logs') }}" class="filter-section">
                            <div class="row g-2">
                                {{-- Search Description --}}
                                <div class="col-md-3">
                                    <label class="filter-label">Search</label>
                                    <input type="text" name="search" class="form-control" 
                                           placeholder="Search description..." 
                                           value="{{ request('search') }}">
                                </div>

                                {{-- Module Filter --}}
                                <div class="col-md-2">
                                    <label class="filter-label">Module</label>
                                    <select name="module" class="custom-select">
                                        <option value="">All Modules</option>
                                        @foreach($modules as $module)
                                            <option value="{{ $module }}" 
                                                    {{ request('module') == $module ? 'selected' : '' }}>
                                                {{ ucfirst($module) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Action Filter --}}
                                <div class="col-md-2">
                                    <label class="filter-label">Action</label><br>
                                    <select name="action" class="custom-select">
                                        <option value="">All Actions</option>
                                        @foreach($actions as $action)
                                            <option value="{{ $action }}" 
                                                    {{ request('action') == $action ? 'selected' : '' }}>
                                                {{ ucfirst(str_replace('_', ' ', $action)) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Status Filter --}}
                                <div class="col-md-2">
                                    <label class="filter-label">Status</label><br>
                                    <select name="status" class="custom-select">
                                        <option value="">All Status</option>
                                        <option value="success" {{ request('status') == 'success' ? 'selected' : '' }}>
                                            Success
                                        </option>
                                        <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>
                                            Failed
                                        </option>
                                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>
                                            Pending
                                        </option>
                                    </select>
                                </div>

                                {{-- User Filter --}}
                                <div class="col-md-3">
                                    <label class="filter-label">User</label><br>
                                    <select name="user_id" class="custom-select">
                                        <option value="">All Users</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->user_id }}" 
                                                    {{ request('user_id') == $user->user_id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                {{-- Reference Number --}}
                                <div class="col-md-2 mt-3">
                                    <label class="filter-label">Ref Number</label>
                                    <input type="text" name="reference" class="form-control" 
                                           placeholder="Stocktake Ref" 
                                           value="{{ request('reference') }}">
                                </div>

                                {{-- Scanner Code --}}
                                <div class="col-md-2 mt-3">
                                    <label class="filter-label">Scanner</label>
                                    <input type="text" name="scanner_code" class="form-control" 
                                           placeholder="Scanner Code" 
                                           value="{{ request('scanner_code') }}">
                                </div>

                                {{-- Rack Number --}}
                                <div class="col-md-2 mt-3">
                                    <label class="filter-label">Rack Number</label>
                                    <input type="text" name="rack_num" class="form-control" 
                                           placeholder="Rack Number" 
                                           value="{{ request('rack_num') }}">
                                </div>

                                {{-- Date From --}}
                                <div class="col-md-2 mt-3">
                                    <label class="filter-label">Date From</label>
                                    <input type="date" name="date_from" class="form-control" 
                                           value="{{ request('date_from') }}">
                                </div>

                                {{-- Date To --}}
                                <div class="col-md-2 mt-3">
                                    <label class="filter-label">Date To</label>
                                    <input type="date" name="date_to" class="form-control" 
                                           value="{{ request('date_to') }}">
                                </div>

                                {{-- Filter Buttons --}}
                                <div class="col-md-2 d-flex align-items-end mt-3 gap-2">
                                    <button type="submit" class="modern-btn modern-btn-primary flex-fill mr-2">
                                        <ion-icon name="funnel-outline"></ion-icon> Filter
                                    </button>
                                    <a href="{{ route('user.activity-logs') }}" class="modern-btn modern-btn-secondary flex-fill">
                                        <ion-icon name="refresh-outline"></ion-icon> Reset
                                    </a>
                                </div>
                            </div>
                        </form>

                        {{-- Results Count --}}
                        <div class="results-info">
                            <p>
                                <strong>{{ $logs->total() }}</strong> total results
                                @if($logs->total() > 0)
                                    — Showing <strong>{{ $logs->firstItem() }}</strong> to <strong>{{ $logs->lastItem() }}</strong>
                                @endif
                            </p>
                        </div>

                        {{-- Activity Table --}}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="3%">ID</th>
                                        <th width="10%">Date & Time</th>
                                        <th width="10%">User</th>
                                        <th width="8%">Module</th>
                                        <th width="10%">Action</th>
                                        <th width="27%">Description</th>
                                        <th width="8%">Reference</th>
                                        <th width="6%">Status</th>
                                        <th width="5%">Records</th>
                                        <th width="5%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($logs as $log)
                                    <tr>
                                        <td><small><strong>{{ $log->id }}</strong></small></td>
                                        <td>
                                            <small><strong>{{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d') }}</strong></small><br>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($log->created_at)->format('H:i:s') }}</small>
                                        </td>
                                        <td>
                                            <strong class="d-block">{{ $log->user_name ?? $log->username ?? 'System' }}</strong>
                                            @if($log->ip_address)
                                                <small class="text-muted">{{ $log->ip_address }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-info text-white">
                                                {{ ucfirst($log->module ?? 'N/A') }}
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $actionStr = strtolower($log->action ?? '');
                                                $badgeClass = 'bg-secondary';
                                                $textClass = 'text-white';

                                                if (stripos($actionStr, 'create') !== false) {
                                                    $badgeClass = 'bg-success';
                                                } elseif (stripos($actionStr, 'csv') !== false || stripos($actionStr, 'upload') !== false) {
                                                    $badgeClass = 'bg-warning';
                                                    $textClass = 'text-dark';
                                                } elseif (stripos($actionStr, 'delete') !== false) {
                                                    $badgeClass = 'bg-danger';
                                                } elseif (stripos($actionStr, 'update') !== false) {
                                                    $badgeClass = 'bg-primary';
                                                } elseif (stripos($actionStr, 'export') !== false) {
                                                    $badgeClass = 'bg-secondary';
                                                }
                                            @endphp

                                            <span class="badge {{ $badgeClass }} {{ $textClass }}">
                                                {{ ucfirst(str_replace('_', ' ', $log->action ?? 'N/A')) }}
                                            </span>
                                        </td>
                                        <td>
                                            <small>{{ $log->description }}</small>
                                            
                                            @if(isset($log->properties_decoded['scanner_code']))
                                                <br>
                                                <small class="text-muted">
                                                    Scanner: {{ $log->properties_decoded['scanner_code'] }}
                                                </small>
                                                <small class="text-muted ml-2">
                                                    Rack: {{ $log->properties_decoded['rack_num'] }}
                                                </small>
                                            @endif
                                            
                                            @if(isset($log->properties_decoded['invalid_articles']) && count($log->properties_decoded['invalid_articles']) > 0)
                                                <br>
                                                <small class="text-danger">
                                                    <ion-icon name="warning-outline"></ion-icon> 
                                                    {{ count($log->properties_decoded['invalid_articles']) }} invalid
                                                </small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($log->reference_number)
                                                <span class="badge bg-primary text-white">
                                                    #{{ $log->reference_number }}
                                                </span>
                                            @else
                                                <small class="text-muted">-</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($log->status == 'success')
                                                <span class="badge bg-success text-white">Success</span>
                                            @elseif($log->status == 'failed')
                                                <span class="badge bg-danger text-white">Failed</span>
                                            @elseif($log->status == 'pending')
                                                <span class="badge bg-secondary text-white">Pending</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <strong>{{ $log->records_affected ?? 0 }}</strong>
                                            @if($log->execution_time)
                                                <br><small class="text-muted">{{ $log->execution_time }}s</small>
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-view view-details" 
                                                    data-log-id="{{ $log->id }}"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#detailsModal"
                                                    title="View Details">
                                                <ion-icon name="eye-outline"></ion-icon>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="10">
                                            <div class="empty-state">
                                                <ion-icon name="folder-open-outline"></ion-icon>
                                                <p>No activity logs found</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination --}}
                        @if($logs->hasPages())
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="text-muted small">
                                Showing {{ $logs->firstItem() ?? 0 }} to {{ $logs->lastItem() ?? 0 }} of {{ $logs->total() }} entries
                            </div>
                            <div>
                                {{ $logs->appends(request()->query())->links() }}
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Details Modal --}}
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        <ion-icon name="information-circle-outline"></ion-icon> Activity Details
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset_js('/user/activity-logs.js') }}"></script>
@endsection