<?php
// ============================================================
//  Shared "Settings" two-column layout
//  Pages that include this end up rendered inside a left-sidebar
//  container so all settings pages share consistent navigation.
//
//  Usage:
//    require __DIR__ . '/_guard.php';      // (already includes auth + chrome)
//    $settings_section = 'general';        // active sidebar key
//    require __DIR__ . '/_settings_open.php';
//    ... your page content ...
//    require __DIR__ . '/_settings_close.php';
// ============================================================

$current_settings = $settings_section ?? '';
$is_super = !empty($admin['role']) && $admin['role'] === 'super_admin';

// Sidebar items
$settings_nav = [
    ['key'=>'general',      'href'=>'settings.php',       'label'=>'General',       'icon'=>'⚙',  'super_only'=>false],
    ['key'=>'payment_fees', 'href'=>'payment-fees.php',   'label'=>'Payment Fees',  'icon'=>'💰', 'super_only'=>false],
    ['key'=>'plans',        'href'=>'plans.php',          'label'=>'Plans',         'icon'=>'💳', 'super_only'=>false],
    ['key'=>'categories',   'href'=>'categories.php',     'label'=>'Categories',    'icon'=>'🏷', 'super_only'=>false],
    ['key'=>'email',        'href'=>'email-templates.php','label'=>'Email',         'icon'=>'✉', 'super_only'=>false],
    ['key'=>'users',        'href'=>'users.php',          'label'=>'Admin Users',   'icon'=>'👥', 'super_only'=>true],
    ['key'=>'zoho',         'href'=>'zoho-log.php',       'label'=>'Zoho Books',    'icon'=>'📚', 'super_only'=>false],
    ['key'=>'cron',         'href'=>'cron-status.php',    'label'=>'Cron Jobs',     'icon'=>'⏱', 'super_only'=>false],
];
?>

<style>
.settings-wrap{
    max-width:none;
    width:100%;
    padding:0 2rem;
    margin:0 auto;
    box-sizing:border-box;
}
@media(min-width:1600px){
    .settings-wrap{padding:0 3rem;}
}
@media(max-width:600px){
    .settings-wrap{padding:0 1rem;}
}

.settings-shell{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:2rem;
    align-items:start;
    margin-top:1.5rem;
}
@media(max-width:900px){
    .settings-shell{grid-template-columns:1fr;gap:1rem;}
}

.settings-side{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:.75rem;
    position:sticky;
    top:80px;
}
@media(max-width:900px){
    .settings-side{position:static;}
}
.settings-side h2{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--ink-muted);
    margin:.25rem 0 .5rem;
    padding:0 .5rem;
    font-weight:700;
}
.settings-side a{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.65rem .85rem;
    border-radius:8px;
    color:var(--ink);
    text-decoration:none;
    font-size:.92rem;
    transition:background .12s;
}
.settings-side a:hover{
    background:var(--surface-alt);
}
.settings-side a.active{
    background:var(--brand-primary);
    color:#fff;
    font-weight:600;
}
.settings-side a .ic{
    font-size:1rem;
    width:20px;
    text-align:center;
    flex:none;
}
.settings-main{
    min-width:0;
}
.settings-page-head{
    margin-bottom:1.5rem;
}
.settings-page-head h1{
    margin:0 0 .25rem;
    font-size:1.5rem;
}
.settings-page-head .crumb{
    color:var(--ink-muted);
    font-size:.82rem;
}
.settings-page-head .crumb a{color:var(--ink-muted);}
</style>

<section class="section">
<div class="settings-wrap">

<div class="settings-shell">
    <aside class="settings-side">
        <h2>Settings</h2>
        <?php foreach ($settings_nav as $item):
            if ($item['super_only'] && !$is_super) continue;
            $is_active = ($current_settings === $item['key']);
        ?>
            <a href="<?= htmlspecialchars($item['href']) ?>"
               class="<?= $is_active ? 'active' : '' ?>">
                <span class="ic"><?= $item['icon'] ?></span>
                <span><?= htmlspecialchars($item['label']) ?></span>
            </a>
        <?php endforeach; ?>
    </aside>

    <div class="settings-main">