<?php

$page_title = 'معاينة واجهة المعتمد';
$UA_FORCE_DESIGN_V2 = true;
require_once __DIR__ . '/auth.php';
require_once __DIR__ . '/helpers.php';
require_once __DIR__ . '/db_bootstrap.php';
require_once __DIR__ . '/agent_portal_lib.php';

require_login();
$conn = ensure_db(true);
if (function_exists('require_any_perm')) require_any_perm(['can_view_agents','can_manage_agents']);
agent_portal_ensure_schema($conn);

$company = agent_portal_company($conn);
$companyName = trim((string)($company['company_name'] ?? '')) ?: 'اسم الشركة';
$ownerName = trim((string)($company['owner_name'] ?? '')) ?: 'مالك البرنامج';
$companyPhone = trim((string)($company['phone'] ?? ''));
$companyAddress = trim((string)($company['address'] ?? ''));
$companyLogoUrl = trim((string)($company['logo_url'] ?? ''));
$companyInitial = function_exists('mb_substr') ? mb_substr($companyName, 0, 1, 'UTF-8') : substr($companyName, 0, 1);

$agent = null;
$agentRs = @$conn->query("SELECT * FROM agents WHERE archived_at IS NULL ORDER BY is_active DESC,id DESC LIMIT 1");
if ($agentRs && $agentRs->num_rows) $agent = $agentRs->fetch_assoc();

$previewAgentName = trim((string)($agent['name'] ?? $ownerName));
$previewAgentUser = trim((string)($agent['username'] ?? 'preview.agent'));
$previewAgentPhone = trim((string)($agent['phone'] ?? ''));
$previewBalance = (float)($agent['balance_cached'] ?? $agent['balance'] ?? 0);
$previewAgentId = (int)($agent['id'] ?? 0);
$connection = agent_portal_connection_state($conn, $agent);
$agentUrlSuffix = $previewAgentId > 0 ? '?agent=' . (int)$previewAgentId : '';
$actualPortalUrl = 'agent_portal.php' . $agentUrlSuffix;
$actualAddUrl = 'agent_subscriber_add.php' . $agentUrlSuffix;
$actualStatusUrl = 'agent_subscriber_status.php' . $agentUrlSuffix;

// Android gets a dedicated preview shell instead of the desktop portal mockup.
$uaAndroidAgentPreview = ((string)($_GET['ua_android'] ?? '') === '1')
  || stripos((string)($_SERVER['HTTP_USER_AGENT'] ?? ''), 'NetworkCustomersAndroid/') !== false;
if ($uaAndroidAgentPreview) $UA_PAGE_CSS = ['assets/css/android_agents_portal_preview.css'];
include __DIR__ . '/header.php';
if ($uaAndroidAgentPreview) {
  require __DIR__ . '/android_agents_portal_preview.php';
  include __DIR__ . '/footer.php';
  return;
}
?>
<style>
  .ua-agent-preview-modern.content-wrapper{height:auto!important;min-height:0!important;display:block!important;overflow:visible!important}
  .ua-agent-preview-modern .content-header{flex:0 0 auto;padding:10px 12px 8px!important}
  .ua-agent-preview-modern .content-header>.container-fluid,
  .ua-agent-preview-modern>.content>.container-fluid{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
  .ua-agent-preview-modern>.content{min-height:0!important;padding:8px!important;overflow:visible!important}
  .ua-agent-preview-modern>.content>.container-fluid{height:auto!important;display:block!important}
  .ua-agent-preview-modern .ap-shell{width:100%;height:auto!important;min-height:0!important;padding:6px;background:transparent;overflow:visible!important}
  .ua-agent-preview-modern .ap-container{width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important}
  .ua-agent-preview-modern .ap-dashboard{align-items:stretch!important;min-height:0!important}
  .ua-agent-preview-modern .ap-dashboard>.ap-panel{height:auto!important;min-height:0!important;display:flex;flex-direction:column}
  .ua-agent-preview-modern .ap-dashboard .ap-action-grid{flex:1;align-items:stretch}
  .ua-agent-preview-modern .ap-dashboard .ap-action{min-height:0}
  .ua-agent-preview-modern .ap-dashboard .ap-empty{margin-top:auto}
  .ua-agent-preview-modern .ap-hero{margin-bottom:14px}
  .ua-agent-preview-modern .ap-profile-grid{margin-bottom:16px}
  .ua-agent-preview-modern .ap-panel{background:rgba(11,27,47,.94)}
  .ua-agent-preview-modern .ap-preview-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:14px}
  .ua-agent-preview-modern .ap-window{display:none}
  .ua-agent-preview-modern .ap-window.is-active{display:block}
  .ua-agent-preview-modern .ap-window-host{min-height:320px}
  .ua-agent-preview-modern .ap-preview-pane{margin-top:14px}
  .ua-agent-preview-modern .ap-preview-shell-note{margin-top:10px;color:#8fa2b8;font-size:12px}
</style>
<div class="content-wrapper ua-extracted-page ua-agents-page ua-agent-preview-modern" style="width:100%!important;max-width:none!important;">
  <section class="content-header">
    <div class="container-fluid">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h1 class="mb-1">معاينة واجهة المعتمد</h1>
          <div class="text-muted">هذه المعاينة أصبحت مطابقة للشكل الجديد للبوابة الفعلية</div>
        </div>
        <?php if($previewAgentId > 0): ?>
          <a class="btn btn-outline-success" href="<?= h($actualPortalUrl) ?>" target="_top" data-no-workspace data-no-frame><i class="fa fa-external-link ml-1"></i> فتح البوابة الفعلية</a>
        <?php else: ?>
          <span class="badge badge-secondary p-2">معاينة فقط</span>
        <?php endif; ?>
      </div>
      <?php include __DIR__ . '/agents_nav.php'; ?>
    </div>
  </section>

  <section class="content" style="min-height:0!important;">
    <div class="container-fluid" style="width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important;">
      <div class="ap-shell" style="width:100%!important;max-width:none!important;padding:6px!important;">
        <div class="ap-container" style="width:100%!important;max-width:none!important;margin:0!important;">
          <header class="ap-hero">
            <div class="ap-brand">
              <?php if($companyLogoUrl !== ''): ?>
                <div class="ap-brand-mark ap-brand-logo"><img src="<?= h($companyLogoUrl) ?>" alt="<?= h($companyName) ?>"></div>
              <?php else: ?>
                <div class="ap-brand-mark"><?= h($companyInitial) ?></div>
              <?php endif; ?>
              <div>
                <h1><?= h($companyName) ?></h1>
                <p>واجهة المعتمد<?= $ownerName !== '' ? ' · مالك البرنامج: ' . h($ownerName) : '' ?></p>
                <?php if($companyPhone !== '' || $companyAddress !== ''): ?>
                  <small class="ap-brand-meta"><?= $companyPhone !== '' ? h($companyPhone) : '' ?><?= ($companyPhone !== '' && $companyAddress !== '') ? ' · ' : '' ?><?= $companyAddress !== '' ? h($companyAddress) : '' ?></small>
                <?php endif; ?>
              </div>
            </div>
            <div class="ap-hero-tools">
              <div class="ap-link-badge <?= h($connection['class']) ?>">
                <span></span>
                <div><strong><?= h($connection['label']) ?></strong><small><?= h($connection['detail']) ?></small></div>
              </div>
              <span class="ap-icon-btn" title="معاينة"><i class="fa fa-eye"></i></span>
            </div>
          </header>

          <div class="ap-window-host">
            <section class="ap-window is-active" id="preview-home" data-ap-window="home">
              <section class="ap-profile-grid">
                <div class="ap-stat"><span>المعتمد</span><strong><?= h($previewAgentName) ?></strong><small><?= h($previewAgentUser) ?><?= $previewAgentPhone !== '' ? ' · ' . h($previewAgentPhone) : '' ?></small></div>
                <div class="ap-stat"><span>الرصيد المستحق</span><strong><?= ua_agent_money($previewBalance) ?></strong></div>
                <div class="ap-stat"><span>حالة الربط</span><strong><?= h($connection['label']) ?></strong><small><?= h($connection['detail']) ?></small></div>
              </section>

              <section class="ap-dashboard">
                <div class="ap-panel ap-card">
                  <div class="ap-card-title"><i class="fa fa-th-large"></i><div><h2>الخدمات</h2></div></div>
                  <div class="ap-action-grid">
                    <a class="ap-action" href="#preview-add" data-ap-open="add" data-ap-title="إضافة مشترك"><i class="fa fa-user-plus"></i><div><strong>إضافة مشترك</strong></div></a>
                    <a class="ap-action" href="#preview-status" data-ap-open="status" data-ap-title="حالة مشترك"><i class="fa fa-heartbeat"></i><div><strong>حالة مشترك</strong></div></a>
                    <a class="ap-action" href="<?= h($actualPortalUrl) ?>" target="_top" data-no-workspace data-no-frame title="يفتح البوابة الفعلية لإرسال طلب محمي"><i class="fa fa-pencil-square-o"></i><div><strong>تعديل مشترك</strong><small><i class="fa fa-lock"></i> بموافقة الإدارة</small></div></a>
                    <a class="ap-action" href="#preview-balance" data-ap-open="balance" data-ap-title="الرصيد"><i class="fa fa-balance-scale"></i><div><strong>رصيد المعتمد</strong></div></a>
                    <a class="ap-action" href="#preview-transactions" data-ap-open="transactions" data-ap-title="حركات الرصيد"><i class="fa fa-book"></i><div><strong>حركات الرصيد</strong></div></a>
                  </div>
                </div>

                <div class="ap-panel ap-card">
                  <div class="ap-card-title"><i class="fa fa-credit-card"></i><div><h2>استعلام وتسديد فاتورة</h2></div></div>
                  <div class="ap-field"><label>البحث عن المشترك</label><input class="form-control" value="" readonly></div>
                  <div class="ap-form-actions"><button class="ap-btn ap-btn-primary" disabled><i class="fa fa-search"></i> بحث</button></div>
                  <div class="ap-empty mt-3">اختر مشتركاً من نتائج البحث لعرض الفواتير.</div>
                </div>
              </section>

              <section class="ap-panel ap-card mt-3">
                <div class="ap-card-title"><i class="fa fa-file-text-o"></i><div><h2>حالة الفواتير</h2></div></div>
                <div class="table-responsive">
                  <table class="ap-table">
                    <thead><tr><th>#</th><th>الدورة</th><th>النوع</th><th>المبلغ</th><th>الحالة</th><th>الإجراء</th></tr></thead>
                    <tbody>
                      <tr>
                        <td>PREVIEW-001</td>
                        <td><?= h(date('Y-m')) ?></td>
                        <td>NEW_SUB</td>
                        <td>0.00</td>
                        <td><span class="ap-tag ap-tag-red">بحاجة إلى تسديد</span></td>
                        <td><button class="ap-btn ap-btn-success" disabled><i class="fa fa-check"></i> تسديد</button></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </section>
            </section>

            <section class="ap-window" id="preview-balance" data-ap-window="balance">
              <div class="ap-panel ap-card">
                <div class="ap-card-title"><i class="fa fa-balance-scale"></i><div><h2>رصيد المعتمد</h2></div></div>
                <section class="ap-profile-grid mb-0">
                  <div class="ap-stat"><span>المعتمد</span><strong><?= h($previewAgentName) ?></strong><small><?= h($previewAgentUser) ?></small></div>
                  <div class="ap-stat"><span>الرصيد المستحق</span><strong><?= ua_agent_money($previewBalance) ?></strong><small>آخر رصيد مخزن في حساب المعتمد.</small></div>
                  <div class="ap-stat"><span>حالة الربط</span><strong><?= h($connection['label']) ?></strong><small><?= h($connection['detail']) ?></small></div>
                </section>
              </div>
            </section>

          <section class="ap-window ap-panel ap-card ap-preview-pane" id="preview-add" data-ap-window="add">
            <div class="ap-card-title"><i class="fa fa-user-plus"></i><div><h2>إضافة مشترك داخل نفس الواجهة</h2></div></div>
            <div class="ap-form-grid">
              <div class="ap-field"><label>اسم المشترك</label><input class="form-control" value="مشترك جديد" readonly></div>
              <div class="ap-field"><label>هاتف المشترك</label><input class="form-control" value="09xxxxxxxx" readonly></div>
              <div class="ap-field"><label>خطة الاشتراك</label><input class="form-control" value="الباقة الافتراضية" readonly></div>
              <div class="ap-field"><label>اسم PPPoE</label><input class="form-control" value="new.pppoe.user" readonly></div>
              <div class="ap-field"><label>كلمة مرور PPPoE</label><input class="form-control" value="******" readonly></div>
              <div class="ap-field"><label>ترحيل الحركة</label><input class="form-control" value="تسجل على المعتمد الحالي" readonly></div>
            </div>
            <div class="ap-contract-print-box">
              <div class="ap-contract-print-form">
                <div class="ap-contract-template-name"><i class="fa fa-check-circle"></i> القالب المعتمد في النسخة الرئيسية</div>
                <label><input type="radio" checked disabled><span><strong>طباعة كامل العقد</strong><small>جميع صفحات القالب.</small></span></label>
                <label><input type="radio" disabled><span><strong>الصفحات المعبأة فقط</strong><small>الصفحات التي تحتوي على بيانات المشترك.</small></span></label>
                <button class="ap-btn ap-btn-primary" type="button" disabled><i class="fa fa-download"></i> توليد وتنزيل ملف Word</button>
              </div>
            </div>
          </section>

          <section class="ap-window ap-panel ap-card ap-preview-pane" id="preview-status" data-ap-window="status">
            <div class="ap-card-title"><i class="fa fa-heartbeat"></i><div><h2>استعلام حالة مشترك داخل نفس الواجهة</h2><p>يعرض الاتصال، الفصل اليدوي، الفصل المالي، والحماية بكلمة مرور عند تفعيلها من النسخة الأساسية.</p></div></div>
            <div class="ap-two-col">
              <div>
                <div class="ap-field"><label>بحث عن المشترك</label><input class="form-control" value="اسم / هاتف / PPPoE" readonly></div>
                <div class="ap-form-actions"><button class="ap-btn ap-btn-primary" disabled><i class="fa fa-search"></i> استعلام</button></div>
              </div>
              <div class="ap-status-card">
                <div class="ap-status-line"><span class="ap-status-dot is-online"></span><div><strong>متصل</strong><span>مثال عرض حالة المشترك داخل بوابة المعتمد.</span></div></div>
                <div class="ap-info-grid">
                  <div class="ap-info"><span>حالة الاشتراك</span><strong>فعال</strong></div>
                  <div class="ap-info"><span>سبب الفصل</span><strong>لا يوجد</strong></div>
                  <div class="ap-info"><span>حماية السجل</span><strong>حسب ضبط النسخة الأساسية</strong></div>
                </div>
              </div>
            </div>
          </section>

          <section class="ap-window ap-panel ap-card ap-preview-pane" id="preview-transactions" data-ap-window="transactions">
            <div class="ap-card-title"><i class="fa fa-book"></i><div><h2>حركات الرصيد داخل نفس المعاينة</h2><p>توضح الحركة، المشترك المرتبط بها، وهل أضافه المعتمد نفسه أم النسخة الأساسية.</p></div></div>
            <div class="table-responsive">
              <table class="ap-table">
                <thead><tr><th>الحركة</th><th>المشترك</th><th>مصدر الإضافة</th><th>المبلغ</th></tr></thead>
                <tbody>
                  <tr><td>إضافة مشترك</td><td>PREVIEW-001</td><td>أضافه هذا المعتمد</td><td><?= ua_agent_money($previewBalance) ?></td></tr>
                </tbody>
              </table>
            </div>
          </section>
          </div>

          <div class="ap-preview-actions">
            <?php if($previewAgentId > 0): ?>
              <a class="ap-btn ap-btn-success" href="<?= h($actualPortalUrl) ?>" target="_top" data-no-workspace data-no-frame><i class="fa fa-external-link"></i> فتح البوابة الفعلية</a>
            <?php endif; ?>
            <a class="ap-btn ap-btn-light" href="agents.php"><i class="fa fa-users"></i> إدارة المعتمدين</a>
            <button type="button" class="ap-btn ap-btn-light" data-ap-open="transactions" data-ap-title="حركات الرصيد"><i class="fa fa-book"></i> حركات الرصيد</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
(function(){
  'use strict';
  var root = document.querySelector('.ua-agent-preview-modern');
  if (!root) return;
  var title = root.querySelector('[data-ap-current-title]');
  var windows = Array.prototype.slice.call(root.querySelectorAll('[data-ap-window]'));
  var triggers = Array.prototype.slice.call(root.querySelectorAll('[data-ap-open]'));
  var names = {};
  triggers.forEach(function(el){
    var key = el.getAttribute('data-ap-open') || '';
    var label = el.getAttribute('data-ap-title') || (el.textContent || '').trim();
    if (key && label && !names[key]) names[key] = label;
  });
  function openWindow(key, label){
    if (!key) key = 'home';
    var found = false;
    windows.forEach(function(win){
      var active = win.getAttribute('data-ap-window') === key;
      win.classList.toggle('is-active', active);
      win.setAttribute('aria-hidden', active ? 'false' : 'true');
      if (active) found = true;
    });
    if (!found) return;
    triggers.forEach(function(el){
      el.classList.toggle('is-active', el.getAttribute('data-ap-open') === key);
      if (el.matches('a')) el.classList.toggle('active', el.getAttribute('data-ap-open') === key);
    });
    if (title) title.textContent = label || names[key] || 'الرئيسية';
    try { history.replaceState(null, '', '#' + (key === 'home' ? 'preview-home' : 'preview-' + key)); } catch(e) {}
  }
  root.addEventListener('click', function(ev){
    var el = ev.target && ev.target.closest ? ev.target.closest('[data-ap-open]') : null;
    if (!el || !root.contains(el)) return;
    ev.preventDefault();
    ev.stopPropagation();
    openWindow(el.getAttribute('data-ap-open'), el.getAttribute('data-ap-title'));
  }, true);
  var hash = (window.location.hash || '').replace(/^#preview-/, '');
  if (hash) openWindow(hash, names[hash]);
})();
</script>
<?php include __DIR__ . '/footer.php'; ?>
