@extends('layouts.master')

@section('styles')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
      /* small utility to keep log box compact */
      .sys-log-box { height: 220px; overflow: auto; background:#0b0b0b; color:#e6e6e6; padding:12px; border-radius:6px; font-family: monospace; font-size:12px; }
      .small-kv { font-size:12px; color:#6b7280; }
    </style>
@endsection

@section('content')
<div class="page-header d-flex align-items-center justify-content-between mb-4">
    <div>
        <h2 class="fw-semibold mb-0">System & Config</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">System</li>
            </ol>
        </nav>
    </div>

</div>


{{-- Health / Storage / Cache --}}
<div class="row g-3 mb-4">
    <div class="col-lg-3">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">System Health</h6>
                <div class="small-kv">PHP process / FPM - approximate</div>
                <ul class="list-unstyled mt-2">
                    <li>PHP Version: <strong id="phpVersion">-</strong></li>
                    <li>App Env: <strong id="appEnv">-</strong></li>
                    <li>Disk Free: <strong id="diskFree">-</strong></li>
                </ul>
              <button id="clearCacheBtn" class="btn btn-outline-secondary btn-sm">Clear Cache</button>
            </div>
        </div>
    </div>
 

        <div class="col-lg-9">
          <div class="card">
              <div class="card-body">
                  <h6 class="card-title">Recent CronJob Logs</h6>
                  <div class="table-responsive">
                      <table class="table table-sm table-striped align-middle" id="recentTxTable">
                          <thead class="table-light">
                              <tr>
                                  <th>Date</th>
                                  <th>Job Name</th>
                                  <th>Data</th>
                              </tr>
                          </thead>
                          <tbody></tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>

      

    <div class="col-lg-12">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Error Log (tail)</h6>
                <div id="errorLog" class="sys-log-box">No logs available</div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@include('layouts.components.scripts')
@include('layouts.components.common-script')
<script src="{{ asset('build/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const rangeEl = document.getElementById('sysRange');
  const refreshBtn = document.getElementById('sysRefresh');
  const clearCacheBtn = document.getElementById('clearCacheBtn');

  // label
  const labelDays = document.getElementById('sysLabelDays');


  function ensureRangeOptions(){
    if(!rangeEl) return;
    const cur = rangeEl.value;
    rangeEl.innerHTML = '';
    [['24h','Last 24 hours'],['yesterday','Yesterday'],['7','Last 7 days'],['15','Last 15 days'],['30','Last 30 days']].forEach(o=>{
      const opt = document.createElement('option'); opt.value=o[0]; opt.text=o[1]; rangeEl.appendChild(opt);
    });
    rangeEl.value = Array.from(rangeEl.options).some(op=>op.value===cur)?cur:'30';
  }
  ensureRangeOptions();

  function mapRangeValue(selected){
    if(selected==='24h') return { range:1, mode:'24h' };
    if(selected==='yesterday') return { range:1, mode:'yesterday' };
    return { range: Number(selected), mode:'days' };
  }


  // small list renderers
  function renderFailedList(rows){
    const container = document.getElementById('failedJobsList');
    if(!container) return; container.innerHTML = '';
    (rows||[]).forEach(r=>{
      const title = r.exception ? (r.exception.length>120? r.exception.substring(0,120)+'...' : r.exception) : (r.connection ?? 'Job');
      const item = document.createElement('div');
      item.className = 'list-group-item small';
      item.innerHTML = `<div class="d-flex justify-content-between"><div>${title}</div><div class="text-muted">${r.failed_at ? new Date(r.failed_at).toLocaleString() : ''}</div></div>`;
      container.appendChild(item);
    });
  }

  function renderPostbackList(rows){
    const container = document.getElementById('postbackList');
    if(!container) return; container.innerHTML = '';
    (rows||[]).forEach(r=>{
      const status = r.status ?? r.http_status ?? 'n/a';
      const attempts = r.attempts ?? r.tries ?? 0;
      const item = document.createElement('div');
      item.className = 'list-group-item small';
      item.innerHTML = `<div class="d-flex justify-content-between"><div><strong>${r.endpoint ?? r.url ?? 'postback'}</strong><div class="small text-muted">${r.event ?? ''}</div></div><div class="text-muted">${status} • ${attempts}</div></div>`;
      container.appendChild(item);
    });
  }

  // simple system info
  function renderSystemInfo(info){
    document.getElementById('phpVersion').innerText = info.php_version ?? '-';
    document.getElementById('appEnv').innerText = info.app_env ?? '-';
    document.getElementById('diskFree').innerText = info.disk_free ?? '-';
    document.getElementById('errorLog').innerText = info.error_tail ?? 'No logs';
  }


  // fetcher
  function fetchSystemData(){
    axios.get("{{ route('admin.dashboard.system.data') }}", {})
      .then(resp=>{
        const p = resp.data || {};
        console.log('System payload', p);

        const tbody = document.querySelector('#recentTxTable tbody');
                      tbody.innerHTML = '';
                      p.cronjob.forEach(r => {
                          const tr = document.createElement('tr');
                          tr.innerHTML = `
      <td style="width:80px;">${r.date}</td>
      <td>${r.job_name}</td>
      <td>${r.meta_data}</td>
      `;
                          tbody.appendChild(tr);
                      });
                
        // system info
        renderSystemInfo(p.system_info || {});
      })
      .catch(err=>{
        console.error('Failed to load system data', err);
      });
  }

  // clear cache button action (lightweight)
  if(clearCacheBtn){
    clearCacheBtn.addEventListener('click', function(){
      clearCacheBtn.disabled = true; clearCacheBtn.innerText = 'Clearing...';
      axios.post("{{ route('admin.dashboard.system.action') }}", { action: 'clear_cache' })
        .then(resp=>{
          alert('Cache cleared');
        })
        .catch(err => {
          console.error('cache clear failed', err);
          alert('Cache clear failed');
        })
        .finally(()=>{ clearCacheBtn.disabled = false; clearCacheBtn.innerText = 'Clear Cache'; });
    });
  }

  if(refreshBtn) refreshBtn.addEventListener('click', fetchSystemData);
  if(rangeEl) rangeEl.addEventListener('change', fetchSystemData);

  // initial
  fetchSystemData();
});
</script>
@endsection