@extends('admin.layout.dashboard_master')

@section('content')
@if(isset($showPasswordForm) && $showPasswordForm)
    @include('admin.developer.password_form')
@else

    <main id="main" class="main">
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Developer Dashboard</h4>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs" id="developerTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="logs-tab" data-toggle="tab" href="#logs" role="tab">Error Logs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="storage-tab" data-toggle="tab" href="#storage" role="tab">Storage</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="server-tab" data-toggle="tab" href="#server" role="tab">Server Info</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="security-tab" data-toggle="tab" href="#security" role="tab">Security Advanced</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="live-monitor-tab" data-toggle="tab" href="#live-monitor" role="tab">Live Monitor</a>
                    </li>
                </ul>

                <div class="tab-content p-3 border border-top-0" id="developerTabsContent">
                    <!-- Logs Tab -->
                    <div class="tab-pane fade show active" id="logs" role="tabpanel">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <form method="GET" action="{{ route('admin.developer.logs') }}">
                                    <div class="input-group">
                                        <select name="log_file" class="form-control">
                                            @foreach($logFiles as $file)
                                            <option value="{{ $file }}" {{ $selectedLog == $file ? 'selected' : '' }}>{{ $file }}</option>
                                            @endforeach
                                        </select>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="submit">View Log</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6 text-right">
                                <form method="POST" action="{{ route('admin.developer.clear-log') }}">
                                    @csrf
                                    <input type="hidden" name="log_file" value="{{ $selectedLog }}">
                                    <button type="submit" class="btn btn-danger" hidden>Clear Log</button>
                                </form>
                            </div>
                        </div>

                        <div class="card bg-dark text-white">
                            <div class="card-header">
                                <h5 class="card-title text-monospace">Log Content: {{ $selectedLog }}</h5>
                            </div>
                            <div class="card-body p-0">
                                <pre class="text-white p-3 mb-0" style="overflow-x: auto; max-height: 500px;">{{ $logContent ?? 'No log content available' }}</pre>
                            </div>
                        </div>
                    </div>

                    <!-- Storage Tab -->
                    <div class="tab-pane fade" id="storage" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Storage Information</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="progress mb-3">
                                            <div class="progress-bar" role="progressbar" style="width: {{ $storageUsage['percentage'] }}%;"
                                                aria-valuenow="{{ $storageUsage['percentage'] }}" aria-valuemin="0" aria-valuemax="100">
                                                {{ $storageUsage['percentage'] }}%
                                            </div>
                                        </div>
                                        <p>Total: {{ $storageUsage['total'] }}</p>
                                        <p>Used: {{ $storageUsage['used'] }}</p>
                                        <p>Free: {{ $storageUsage['free'] }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Directory Contents</h5>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-group">
                                            @foreach($directoryContents as $item)
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                {{ $item['name'] }}
                                                <span class="badge badge-primary badge-pill">{{ $item['type'] }}</span>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Server Tab -->
                    <div class="tab-pane fade" id="server" role="tabpanel">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Server Load</h5>
                                    </div>
                                   <!-- In the server tab section -->
<div class="card-body">
    @if(function_exists('sys_getloadavg'))
        <canvas id="loadChart" height="200"></canvas>
        <div class="mt-3">
            <p>1 Minute: {{ $serverLoad[0] }}</p>
            <p>5 Minutes: {{ $serverLoad[1] }}</p>
            <p>15 Minutes: {{ $serverLoad[2] }}</p>
        </div>
    @else
        <div class="alert alert-warning">
            Server load information is not available on Windows systems.
        </div>
    @endif
</div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">PHP Information</h5>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-group">
                                            <li class="list-group-item">PHP Version: {{ phpversion() }}</li>
                                            <li class="list-group-item">Memory Limit: {{ ini_get('memory_limit') }}</li>
                                            <li class="list-group-item">Max Execution Time: {{ ini_get('max_execution_time') }}s</li>
                                            <li class="list-group-item">Upload Max Filesize: {{ ini_get('upload_max_filesize') }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
              <div class="developer-comments">
    <h3>Developer Comments</h3>
    <div class="comment">
        <p><strong>Comment 1:</strong> Color codes are used in many files</p>
        <p><em>Note: Consider centralizing color definitions in a CSS variables file for easier maintenance.</em></p>
    </div>
    
    <div class="comment">
        <p><strong>Comment 2:</strong> Don't run "php artisan migrate"</p>
        <p><em>Note: Run specific migrations instead (e.g., php artisan migrate --path=/database/migrations/2025_08_07_123456_create_users_table.php)</em></p>
    </div>
    
    <div class="comment">
        <p><strong>Comment 3:</strong> After deployment, run the schedule work</p>
        <p><em>Note: Run the command "php artisan schedule:work"</em></p>
    </div>
    
    <div class="comment">
        <p><strong>Comment 4:</strong> Missed orders can be checked in the log file</p>
        <p><em>Note: Missed orders are automatically recorded in the log file</em></p>
    </div>
</div>

<style>
.developer-comments {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.developer-comments h3 {
    margin-top: 0;
    color: #333;
}
.comment {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
}
.comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.comment strong {
    color: #2c3e50;
}
.comment em {
    color: #7f8c8d;
    font-size: 0.9em;
}
</style>
                    </div>

                    <!-- Security Tab -->
                    <div class="tab-pane fade" id="security" role="tabpanel">
                        <div class="card">
                            <div class="card-header bg-danger text-white">
                                <h5 class="card-title text-white mb-0">Security Logs & System Activities</h5>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead class="bg-light">
                                            <tr>
                                                <th>Time</th>
                                                <th>Activity / Message</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($securityLogs ?? [] as $log)
                                            <tr>
                                                <td class="text-nowrap" style="width: 200px;">
                                                    <span class="badge badge-info">{{ $log->created_at->format('Y-m-d H:i:s') }}</span>
                                                    <br>
                                                    <small class="text-muted">{{ $log->created_at->diffForHumans() }}</small>
                                                </td>
                                                <td>
                                                    <div class="p-2 border-left border-danger" style="background: #fffcfc;">
                                                        {{ $log->message }}
                                                    </div>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="2" class="text-center p-4">
                                                    <i class="bi bi-shield-check text-success" style="font-size: 2rem;"></i>
                                                    <p class="mt-2">No security events recorded in the system logs.</p>
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">Showing last 100 system activities recorded in the database.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Live Monitor Tab -->
                    <div class="tab-pane fade" id="live-monitor" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">Real-time Error Monitor</h5>
                            <div>
                                <span id="monitor-status" class="badge badge-success">Running</span>
                                <button id="toggle-monitor" class="btn btn-sm btn-outline-secondary ml-2">Pause</button>
                                <button id="clear-terminal" class="btn btn-sm btn-outline-danger ml-2">Clear Terminal</button>
                            </div>
                        </div>
                        <div class="card bg-black text-success" style="background: #000 !important; border: 2px solid #333;">
                            <div class="card-header d-flex justify-content-between align-items-center" style="background: #1a1a1a; border-bottom: 1px solid #333;">
                                <span class="text-monospace small">tail -f laravel.log</span>
                                <span id="last-update" class="text-muted small">Connecting...</span>
                            </div>
                            <div class="card-body p-0" style="background: #000 !important;">
                                <pre id="terminal-content" class="text-success p-3 mb-0" 
                                     style="overflow-y: auto; height: 600px; font-family: 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4; scroll-behavior: smooth; color: #00ff00 !important;"></pre>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="col-md-6 text-right">
    @if(config('developer.logs_password'))
        <a href="{{ route('admin.developer.logs.logout') }}" class="btn btn-warning mr-2">Logout</a>
    @endif
    <form method="POST" action="{{ route('admin.developer.clear-log') }}" style="display: inline;">
        @csrf
        <input type="hidden" name="log_file" value="{{ $selectedLog }}">
        {{-- <button type="submit" class="btn btn-danger">Clear Log</button> --}}
    </form>
</div>
</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Load Chart
    const loadCtx = document.getElementById('loadChart').getContext('2d');
    const loadChart = new Chart(loadCtx, {
        type: 'line',
        data: {
            labels: ['1 Minute', '5 Minutes', '15 Minutes'],
            datasets: [{
                label: 'Server Load',
                data: [{{ implode(',', $serverLoad) }}],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

<script>
    // Live Monitor Logic
    let monitorInterval = null;
    let isMonitoring = true;
    const terminal = document.getElementById('terminal-content');
    const statusBadge = document.getElementById('monitor-status');
    const lastUpdateSpan = document.getElementById('last-update');
    const toggleBtn = document.getElementById('toggle-monitor');
    const clearBtn = document.getElementById('clear-terminal');

    function fetchLogs() {
        if (!isMonitoring) return;

        fetch('{{ route("admin.developer.logs.live-data") }}')
            .then(response => response.json())
            .then(data => {
                const currentContent = terminal.innerText;
                if (data.content !== currentContent) {
                    terminal.innerText = data.content;
                    terminal.scrollTop = terminal.scrollHeight;
                }
                lastUpdateSpan.innerText = 'Last sync: ' + data.time;
            })
            .catch(error => {
                console.error('Error fetching logs:', error);
                lastUpdateSpan.innerText = 'Sync Error';
            });
    }

    function startMonitoring() {
        fetchLogs();
        monitorInterval = setInterval(fetchLogs, 3000); // 3 second poll
    }

    toggleBtn.addEventListener('click', () => {
        isMonitoring = !isMonitoring;
        if (isMonitoring) {
            statusBadge.innerText = 'Running';
            statusBadge.classList.remove('badge-secondary');
            statusBadge.classList.add('badge-success');
            toggleBtn.innerText = 'Pause';
        } else {
            statusBadge.innerText = 'Paused';
            statusBadge.classList.remove('badge-success');
            statusBadge.classList.add('badge-secondary');
            toggleBtn.innerText = 'Resume';
        }
    });

    clearBtn.addEventListener('click', () => {
        terminal.innerText = '[Terminal Cleared]';
    });

    // Auto-switch tab if requested
    document.addEventListener("DOMContentLoaded", () => {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('tab') === 'monitor') {
            $('#live-monitor-tab').tab('show');
        }
        startMonitoring();
    });
</script>
    </main>
@endif
@endsection