@extends('layouts.admin_app')

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

@section('content')
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Activity Logs</h1>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs" id="activityTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="activity-logs-tab" data-bs-toggle="tab" data-bs-target="#activity-logs" type="button" role="tab" aria-controls="activity-logs" aria-selected="true">
                Activity Logs
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="login-attempts-tab" data-bs-toggle="tab" data-bs-target="#login-attempts" type="button" role="tab" aria-controls="login-attempts" aria-selected="false">
                Login Attempts
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="activityTabsContent">
        <!-- Activity Logs Tab -->
        <div class="tab-pane fade show active" id="activity-logs" role="tabpanel" aria-labelledby="activity-logs-tab">
            <div class="card shadow mb-4 mt-3">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Filter Activity Logs</h6>
                </div>
                <div class="card-body">
                    <form id="filterForm" class="row g-3">
                        <div class="col-md-3">
                            <label for="action_type" class="form-label">Action Type</label>
                            <select class="form-control" id="action_type" name="action_type">
                                <option value="">All Actions</option>
                                <option value="profile_created">Profile Created</option>
                                <option value="profile_updated">Profile Updated</option>
                                <option value="user_updated">User Updated</option>
                                <option value="user_access_rights_updated">Access Rights Updated</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date">
                        </div>
                        <div class="col-md-3">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-primary" onclick="loadActivityLogs()">
                                    <i class="fas fa-filter"></i> Filter
                                </button>
                                <button type="button" class="btn btn-secondary" onclick="clearFilters()">
                                    <i class="fas fa-times"></i> Clear
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Activity Log Records</h6>
                </div>
                <div class="card-body">
                    <div id="activityLogsContainer">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Login Attempts Tab -->
        <div class="tab-pane fade" id="login-attempts" role="tabpanel" aria-labelledby="login-attempts-tab">
            <div class="card shadow mb-4 mt-3">
                {{-- <div class="card-header py-3">
                </div> --}}
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.activity_logs') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-8">
                                <input type="text" name="location_search" class="form-control" placeholder="Search by Location Trading Name..." value="{{ request('location_search') }}">
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Search
                                </button>
                                @if(request('location_search'))
                                <a href="{{ route('admin.activity_logs') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Clear
                                </a>
                                @endif
                            </div>
                        </div>
                    </form>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Location Name</th>
                                    <th>Location Code</th>
                                    <th>Username</th>
                                    <th>IP Address Changes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($locationData ?? [] as $data)
                                <tr>
                                    <td>{{ $data['location']->trading_name }}</td>
                                    <td>{{ $data['location']->location_code }}</td>
                                    <td>{{ $data['location']->username }}</td>
                                    <td>
                                        <table class="table table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>IP Address</th>
                                                    <th>Date/Time</th>
                                                    <th>Status</th>
                                                    <th>Browser</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($data['attempts'] as $attempt)
                                                <tr>
                                                    <td>{{ $attempt->ip }}</td>
                                                    <td>{{ $attempt->created_at->format('Y-m-d H:i:s') }}</td>
                                                    <td>
                                                        @if($attempt->is_active == 1)
                                                            <span class="badge bg-success">Success</span>
                                                        @else
                                                            <span class="badge bg-danger">Failed</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $attempt->browser ?? 'N/A' }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">No location login attempts found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for viewing details -->
<div class="modal fade" id="logDetailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Activity Log Details - Changes Made</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="changes-container"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function loadActivityLogs() {
    const formData = new FormData(document.getElementById('filterForm'));
    const params = new URLSearchParams(formData);
    
    document.getElementById('activityLogsContainer').innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>';
    
    fetch('{{ route("admin.activity_logs") }}?' + params.toString(), {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('activityLogsContainer').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('activityLogsContainer').innerHTML = '<div class="alert alert-danger">Error loading activity logs. Please try again.</div>';
        console.error('Error:', error);
    });
}

function clearFilters() {
    document.getElementById('filterForm').reset();
    loadActivityLogs();
}

function showLogDetails(logId, oldValues, newValues) {
    try {
        const oldData = oldValues && oldValues !== 'null' ? JSON.parse(oldValues) : null;
        const newData = newValues && newValues !== 'null' ? JSON.parse(newValues) : null;
        
        let html = '';
        
        if (!oldData && !newData) {
            html = '<div class="alert alert-info">No changes data available</div>';
        } else if (!oldData && newData) {
            // New record created
            html = '<h6 class="text-success mb-3"><i class="fas fa-plus-circle"></i> New Record Created</h6>';
            html += '<table class="table table-bordered table-sm">';
            html += '<thead class="table-success"><tr><th width="30%">Field</th><th>Value</th></tr></thead><tbody>';
            for (let key in newData) {
                html += `<tr><td class="font-weight-bold">${formatFieldName(key)}</td><td>${formatValue(newData[key])}</td></tr>`;
            }
            html += '</tbody></table>';
        } else {
            // Record updated - show what changed
            html = '<h6 class="text-primary mb-3"><i class="fas fa-edit"></i> Changes Made</h6>';
            html += '<table class="table table-bordered table-sm">';
            html += '<thead class="table-light"><tr><th width="30%">Field</th><th width="35%">Old Value</th><th width="35%">New Value</th></tr></thead><tbody>';
            
            // Get all unique keys
            const allKeys = new Set([...Object.keys(oldData || {}), ...Object.keys(newData || {})]);
            
            let hasChanges = false;
            allKeys.forEach(key => {
                const oldVal = oldData ? oldData[key] : null;
                const newVal = newData ? newData[key] : null;
                
                if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
                    hasChanges = true;
                    html += '<tr>';
                    html += `<td class="font-weight-bold">${formatFieldName(key)}</td>`;
                    html += `<td class="bg-light text-danger"><del>${formatValue(oldVal)}</del></td>`;
                    html += `<td class="bg-light text-success"><strong>${formatValue(newVal)}</strong></td>`;
                    html += '</tr>';
                }
            });
            
            if (!hasChanges) {
                html += '<tr><td colspan="3" class="text-center text-muted">No changes detected</td></tr>';
            }
            
            html += '</tbody></table>';
        }
        
        document.getElementById('changes-container').innerHTML = html;
    } catch(e) {
        console.error('Error parsing JSON:', e);
        document.getElementById('changes-container').innerHTML = '<div class="alert alert-danger">Error displaying changes</div>';
    }
    
    $('#logDetailsModal').modal('show');
}

function formatFieldName(key) {
    return key.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

function formatValue(value) {
    if (value === null || value === undefined || value === '') {
        return '<em class="text-muted">Empty</em>';
    }
    // Handle boolean-like values (0, 1, "0", "1", true, false)
    if (value === 0 || value === '0' || value === false) {
        return '<span class="badge badge-secondary">No</span>';
    }
    if (value === 1 || value === '1' || value === true) {
        return '<span class="badge badge-success">Yes</span>';
    }
    if (typeof value === 'object') {
        return '<pre class="mb-0" style="font-size: 12px;">' + JSON.stringify(value, null, 2) + '</pre>';
    }
    return String(value);
}

// Load logs on page load
document.addEventListener('DOMContentLoaded', function() {
    loadActivityLogs();
});
</script>
@endsection