@extends('admin.layout.dashboard_master')

@section('content')

<section class="section" style="padding-left: 22%;padding-top:7%">
     <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">System Activity Log</h5>
                            <p class="text-muted mb-0">Track and monitor system events</p>
                        </div>
                        <div class="d-flex">
                            <a href="{{ route('admin.developer.dashboard') }}" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-code me-1"></i> Dev Side
                            </a>
                            <div class="input-group" style="width: 250px;">
                                <input type="text" id="filter-text" class="form-control" placeholder="Filter logs...">
                                <button class="btn btn-primary" onclick="filterLog()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="150">Timestamp</th>
                                    <th>Message</th>

                                </tr>
                            </thead>
                            <tbody id="log-table-body">
                                @php
                                    $log_data = App\Models\Systemlog::orderBy('created_at', 'desc')->get();
                                @endphp
                                @foreach ($log_data as $log)
                                <tr class="log-entry">
                                    <td class="text-nowrap">
                                        <span class="badge bg-light text-dark">{{ $log->created_at->format('M d, Y') }}</span>
                                        <small class="d-block text-muted">{{ $log->created_at->format('H:i:s') }}</small>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if(str_contains(strtolower($log->message), 'error'))
                                            <span class="badge bg-danger me-2">Error</span>
                                            @elseif(str_contains(strtolower($log->message), 'warning'))
                                            <span class="badge bg-warning me-2">Warning</span>
                                            @else
                                            <span class="badge bg-success me-2">Info</span>
                                            @endif
                                            <span class="log-message">{{ $log->message }}</span>
                                        </div>
                                    </td>
                                    {{-- <td>
                                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" data-bs-toggle="tooltip" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td> --}}
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @if($log_data->isEmpty())
                    <div class="text-center py-5">
                        <div class="mb-3">
                            <i class="fas fa-clipboard-list fa-3x text-muted"></i>
                        </div>
                        <h5 class="text-muted">No log entries found</h5>
                        <p class="text-muted">System activity will appear here</p>
                    </div>
                    @endif
                </div>

                <div class="card-footer d-flex justify-content-between align-items-center">
                    <div class="text-muted">
                        Showing <span id="showing-count">{{ $log_data->count() }}</span> of {{ $log_data->count() }} entries
                    </div>
                    <div hidden>
                        <button class="btn btn-sm btn-outline-secondary me-2">
                            <i class="fas fa-download me-1"></i> Export
                        </button>
                        <button class="btn btn-sm btn-outline-danger">
                            <i class="fas fa-trash me-1"></i> Clear Logs
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .log-entry {
        transition: all 0.2s ease;
    }
    .log-entry:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }
    .table-responsive {
        max-height: 600px;
        overflow-y: auto;
    }
    .log-message {
        font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 13px;
    }
    .badge {
        font-weight: 500;
    }
</style>

<script>
    function filterLog() {
        var filterText = $('#filter-text').val().toLowerCase();
        var visibleCount = 0;

        $('.log-entry').each(function() {
            var logText = $(this).find('.log-message').text().toLowerCase();
            var isVisible = logText.indexOf(filterText) > -1;
            $(this).toggle(isVisible);

            if(isVisible) visibleCount++;
        });

        $('#showing-count').text(visibleCount);
    }

    // Initialize tooltips
    $(function () {
        $('[data-bs-toggle="tooltip"]').tooltip();
    });
</script>
@endsection