@extends('layouts.app_settings')

@section('title', 'MySQL Status')

@section('content')
<div class="container mt-5">
    <h2>📊 MySQL Connection Status</h2>
    <div class="alert alert-info" role="alert">
        ⏱️ آخر تحديث: <span id="updated_at">{{ now() }}</span>
    </div>

    <table class="table table-bordered mt-4" id="mysql-status-table">
        <thead class="thead-dark">
            <tr>
                <th>Variable</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($data as $key => $value)
                <tr>
                    <td><strong>{{ $key }}</strong></td>
                    <td>{{ $value }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<hr class="my-5" />

<div class="container">
    <h3>🧩 قائمة الاتصالات المفتوحة (SHOW FULL PROCESSLIST)</h3>
    <table class="table table-bordered table-sm table-hover" id="processlist-table">
        <thead class="thead-dark">
            <tr>
                <th>ID</th>
                <th>User</th>
                <th>Host</th>
                <th>DB</th>
                <th>Command</th>
                <th>Time</th>
                <th>State</th>
                <th>Info</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($processes as $p)
                <tr>
                    <td>{{ $p->Id }}</td>
                    <td>{{ $p->User }}</td>
                    <td>{{ $p->Host }}</td>
                    <td>{{ $p->db }}</td>
                    <td>{{ $p->Command }}</td>
                    <td>{{ $p->Time }}</td>
                    <td>{{ $p->State }}</td>
                    <td style="max-width: 250px; word-wrap: break-word;">{{ \Illuminate\Support\Str::limit($p->Info, 100) }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script>
    setInterval(() => {
        fetch(window.location.href)
            .then(res => res.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const statusTable = doc.querySelector('#mysql-status-table tbody');
                const processTable = doc.querySelector('#processlist-table tbody');
                const updated = new Date().toLocaleTimeString();

                document.querySelector('#mysql-status-table tbody').innerHTML = statusTable.innerHTML;
                document.querySelector('#processlist-table tbody').innerHTML = processTable.innerHTML;
                document.querySelector('#updated_at').textContent = updated;
            });
    }, 10000); // كل 10 ثواني
</script>
@endsection