<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings — WhatsApp Cloud API</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f0f2f5; min-height:100vh; display:flex; flex-direction:column; }

        /* ── HEADER ── */
        header { background:#000; color:#fff; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; position:fixed; top:0;left:0;right:0; z-index:200; border-bottom:1px solid #1a1a1a; }
        .brand { display:flex; align-items:center; gap:.65rem; font-size:1rem; font-weight:700; color:#fff; }
        .brand svg { width:30px; height:30px; }
        .brand-logo { height:36px; width:auto; max-width:140px; object-fit:contain; flex-shrink:1; min-width:0; }
        .user-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #333; flex-shrink:0; }
        .user-avatar-initials { width:32px; height:32px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; color:#000; flex-shrink:0; }
        .header-right { display:flex; align-items:center; gap:1rem; font-size:.85rem; }
        .header-right .username { color:#aaa; font-weight:500; }
        .btn-logout { background:transparent; border:1px solid #333; color:#ccc; padding:.38rem 1rem; border-radius:7px; cursor:pointer; font-size:.82rem; font-weight:600; transition:.2s; }
        .btn-logout:hover { border-color:#666; color:#fff; }

        /* ── LAYOUT ── */
        .layout { display:flex; flex:1; margin-top:58px; min-height:calc(100vh - 58px); }

        /* ── SIDEBAR ── */
        aside { width:248px; background:#000; position:fixed; top:58px; left:0; bottom:0; overflow-y:auto; padding:1.25rem 0 2rem; border-right:1px solid #1c1c1c; scrollbar-width:thin; scrollbar-color:#2a2a2a #000; }
        .nav-section-label { padding:1.2rem 1.4rem .4rem; font-size:.63rem; font-weight:700; letter-spacing:1.4px; color:#aab; text-transform:uppercase; }
        .nav-item { display:flex; align-items:center; gap:.8rem; padding:.7rem 1.4rem; color:#d1d5db; text-decoration:none; font-size:.88rem; font-weight:500; border-left:3px solid transparent; transition:.18s; white-space:nowrap; cursor:pointer; }
        .nav-item:hover { background:#25d366; color:#000; border-left-color:#1db954; }
        .nav-item:hover svg { opacity:1; color:#000; }
        .nav-item.active { background:#25d366; color:#000 !important; border-left-color:#1db954; font-weight:700; }
        .nav-item.active svg { opacity:1; color:#000; }
        .nav-item svg { width:17px; height:17px; flex-shrink:0; opacity:.7; }
        .nav-sep { height:1px; background:#1a1a1a; margin:.6rem 0; }

        /* ── MAIN ── */
        main { margin-left:248px; flex:1; padding:1.75rem 2rem; animation:fadeIn .18s ease both; }
        @keyframes fadeIn  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
        @keyframes fadeOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-8px)} }
        @keyframes toastIn  { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
        @keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(10px) scale(.95)} }

        .page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
        .page-header h1 { font-size:1.35rem; font-weight:800; color:#0f0f0f; }
        .page-header p  { font-size:.85rem; color:#9ca3af; margin-top:.2rem; }

        /* ── SETTINGS LAYOUT ── */
        .settings-layout { display:flex; gap:1.5rem; align-items:flex-start; }

        /* Left tab nav */
        .settings-tabs { width:210px; flex-shrink:0; background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden; position:sticky; top:1.75rem; }
        .s-tab { display:flex; align-items:center; gap:.65rem; padding:.75rem 1.1rem; font-size:.85rem; font-weight:500; color:#6b7280; cursor:pointer; border-left:3px solid transparent; transition:.15s; }
        .s-tab:hover { background:#f8fafc; color:#0f0f0f; }
        .s-tab.active { background:#f0fdf4; color:#15803d; border-left-color:#25d366; font-weight:700; }
        .s-tab svg { width:16px; height:16px; flex-shrink:0; }
        .s-tab-sep { height:1px; background:#f1f5f9; }

        /* Right content */
        .settings-content { flex:1; min-width:0; }
        .s-panel { display:none; }
        .s-panel.active { display:block; }

        /* Section card */
        .s-card { background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:1.25rem; overflow:hidden; }
        .s-card-head { padding:1.1rem 1.4rem; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:.6rem; }
        .s-card-head h3 { font-size:.95rem; font-weight:800; color:#0f0f0f; }
        .s-card-head .s-card-icon { font-size:1.1rem; }
        .s-card-body { padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:1.1rem; }

        /* Field row */
        .s-field { display:flex; flex-direction:column; gap:.3rem; }
        .s-field.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
        .s-label { font-size:.82rem; font-weight:600; color:#374151; }
        .s-hint  { font-size:.75rem; color:#9ca3af; line-height:1.5; }
        .s-input, .s-select {
            padding:.62rem .9rem;
            border:1.5px solid #e5e7eb;
            border-radius:9px;
            font-size:.88rem;
            color:#111;
            background:#fff;
            outline:none;
            width:100%;
            font-family:inherit;
            transition:.18s;
        }
        .s-input:focus, .s-select:focus { border-color:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.1); }

        /* Toggle row */
        .toggle-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.15rem 0; }
        .toggle-row .toggle-info { flex:1; }
        .toggle-row .toggle-info .s-label { display:flex; align-items:center; gap:.4rem; }
        .toggle-row .toggle-info .s-label .badge-warn { background:#fef3c7; color:#b45309; font-size:.68rem; padding:.15rem .5rem; border-radius:5px; font-weight:700; }

        /* Toggle switch */
        .toggle-switch { position:relative; width:42px; height:24px; flex-shrink:0; margin-top:2px; }
        .toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
        .toggle-track { position:absolute; inset:0; background:#e5e7eb; border-radius:24px; cursor:pointer; transition:.2s; }
        .toggle-track:before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
        .toggle-switch input:checked + .toggle-track { background:#25d366; }
        .toggle-switch input:checked + .toggle-track:before { transform:translateX(18px); }

        /* Storage selector */
        .storage-opts { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
        .storage-opt { border:2px solid #e5e7eb; border-radius:10px; padding:.85rem 1rem; cursor:pointer; transition:.2s; display:flex; align-items:center; gap:.65rem; }
        .storage-opt:hover { border-color:#25d366; background:#f0fdf4; }
        .storage-opt.selected { border-color:#25d366; background:#f0fdf4; }
        .storage-opt input { display:none; }
        .storage-opt .so-icon { font-size:1.4rem; }
        .storage-opt .so-name { font-size:.88rem; font-weight:700; color:#0f0f0f; }
        .storage-opt .so-sub  { font-size:.74rem; color:#9ca3af; }

        /* Log viewer */
        .log-list { display:flex; flex-direction:column; gap:.5rem; max-height:620px; overflow-y:auto; padding:.25rem 0; scrollbar-width:thin; }
        .log-entry { border-radius:10px; overflow:hidden; }
        .log-entry-body { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem; }
        .log-level { flex-shrink:0; padding:.22rem .6rem; border-radius:6px; font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
        .lvl-error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
        .lvl-warning { background:#fffbeb; color:#d97706; border:1px solid #fde68a; }
        .lvl-info    { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
        .lvl-debug   { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
        .lvl-default { background:#f8fafc; color:#6b7280; border:1px solid #e5e7eb; }
        /* per-level entry background */
        .log-entry.le-error   { background:#fef2f2; border:1.5px solid #fecaca; }
        .log-entry.le-warning { background:#fffbeb; border:1.5px solid #fde68a; }
        .log-entry.le-info    { background:#f0fdf4; border:1.5px solid #dcfce7; }
        .log-entry.le-debug   { background:#eff6ff; border:1.5px solid #bfdbfe; }
        .log-entry.le-default { background:#f8fafc; border:1.5px solid #f1f5f9; }
        .log-meta { flex:1; min-width:0; }
        .log-msg  { font-size:.84rem; font-weight:600; color:#0f0f0f; word-break:break-word; line-height:1.4; }
        .log-time { font-size:.72rem; color:#9ca3af; margin-top:.2rem; }
        .log-trace-block { padding:.55rem 1rem .7rem 2.85rem; border-top:1px solid rgba(0,0,0,.06); }
        .log-trace-block pre { font-family:'SFMono-Regular',Consolas,monospace; font-size:.72rem; color:#374151; white-space:pre-wrap; word-break:break-all; line-height:1.65; background:rgba(0,0,0,.04); border-radius:7px; padding:.6rem .75rem; }
        .log-entry.le-error .log-trace-block pre   { background:rgba(220,38,38,.06); color:#991b1b; }
        .log-entry.le-warning .log-trace-block pre { background:rgba(217,119,6,.06); color:#92400e; }
        .log-empty-state { text-align:center; padding:3rem 2rem; color:#9ca3af; font-size:.88rem; }
        /* Filter bar */
        .log-filters { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; flex-wrap:wrap; }
        .lf-btn { padding:.3rem .75rem; border-radius:7px; border:1.5px solid #e5e7eb; font-size:.78rem; font-weight:600; cursor:pointer; background:#fff; color:#6b7280; transition:.15s; }
        .lf-btn:hover, .lf-btn.active { border-color:#25d366; background:#f0fdf4; color:#15803d; }
        .lf-btn.f-error.active   { border-color:#dc2626; background:#fef2f2; color:#dc2626; }
        .lf-btn.f-warning.active { border-color:#d97706; background:#fffbeb; color:#d97706; }
        .lf-btn.f-info.active    { border-color:#16a34a; background:#f0fdf4; color:#16a34a; }
        .lf-btn.f-debug.active   { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
        .log-search { flex:1; min-width:180px; padding:.38rem .8rem; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.82rem; outline:none; }
        .log-search:focus { border-color:#25d366; }
        .log-stats { font-size:.75rem; color:#9ca3af; margin-left:auto; }

        /* Save bar */
        .save-bar { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding:1rem 1.4rem; background:#fff; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-top:.5rem; }
        .btn-save { background:#0f0f0f; color:#fff; border:none; padding:.65rem 1.5rem; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; transition:.18s; display:flex; align-items:center; gap:.5rem; }
        .btn-save:hover { background:#1a1a1a; }
        .btn-save svg { width:15px; height:15px; }

        /* ── SEND OPTIONS ── */
        .send-opt { display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; border:2px solid #e5e7eb; border-radius:12px; cursor:pointer; transition:.15s; background:#fff; }
        .send-opt:hover { border-color:#25d366; background:#f0fdf4; }
        .send-opt.selected { border-color:#25d366; background:#f0fdf4; }
        .send-opt-icon { font-size:1.5rem; flex-shrink:0; }
        .send-opt-title { font-size:.88rem; font-weight:700; color:#0f0f0f; }
        .send-opt-sub { font-size:.75rem; color:#9ca3af; margin-top:.1rem; }
    </style>
</head>
<body>

<!-- HEADER -->
@php
    $appLogo   = \App\Models\Setting::get('app_logo', '');
    $appName   = \App\Models\Setting::get('project_name', 'On Cloud API');
    $hasLogo   = $appLogo && file_exists(public_path('uploads/' . $appLogo));
    $userPhoto = $authUser->profile_photo_path ?? '';
    $hasPhoto  = $userPhoto && file_exists(public_path('uploads/' . $userPhoto));
    $initials  = strtoupper(substr($authUser->name ?? 'U', 0, 1));
@endphp
<header>
    <div class="brand">
        @if($hasLogo)
            <img src="{{ asset('uploads/' . $appLogo) }}" class="brand-logo" alt="{{ $appName }}">
        @else
            <svg viewBox="0 0 48 48" fill="none">
                <circle cx="24" cy="24" r="24" fill="#25D366"/>
                <path d="M24 10C16.268 10 10 16.268 10 24c0 2.637.718 5.107 1.97 7.23L10 38l7-1.93A13.93 13.93 0 0024 38c7.732 0 14-6.268 14-14S31.732 10 24 10z" fill="white"/>
                <path d="M19.5 17.5c-.4-.9-1-1-1.4-1h-1.2c-.4 0-1 .15-1.5.7s-2 2-2 4.85 2.05 5.6 2.35 5.95 4 6.3 9.75 8.6c4.8 1.9 5.75 1.5 6.75 1.4s3.25-1.35 3.7-2.65.45-2.4.3-2.65-1.15-1.1-2.4-1.7-3.05-1.5-3.5-1.65-.8-.25-1.15.25-1.3 1.65-1.6 2c-.3.3-.6.35-1.1.1s-2.15-1.05-4.1-2.8c-1.52-1.5-2.53-3.35-2.83-3.85s-.03-.75.22-1l.55-.65c.2-.2.3-.45.45-.75s.05-.55-.05-.75l-1.74-3.6z" fill="#25D366"/>
            </svg>
        @endif
    </div>
    <div class="header-right">
        @if($hasPhoto)
            <img src="{{ asset('uploads/' . $userPhoto) }}" class="user-avatar" alt="{{ $authUser->name }}">
        @else
            <div class="user-avatar-initials">{{ $initials }}</div>
        @endif
        <span class="username">{{ $authUser->name }}</span>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="btn-logout">Logout</button>
        </form>
    </div>
</header>

<div class="layout">
    <!-- SIDEBAR -->
    <aside>
        <div class="nav-section-label">Main</div>
        <a href="{{ route('dashboard') }}" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
            Dashboard
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">Management</div>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Subscriptions
        </a>
        <a href="{{ route('companies') }}" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            Companies
        </a>
        <a href="{{ route('pricing-plans') }}" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12h6m-6 4h6"/></svg>
            Pricing Plans
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">Explore</div>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
            Today Messages
        </a>
        <a href="#" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
            Today Campaigns
        </a>
        <a href="{{ route('apps') }}" class="nav-item">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
            Apps
        </a>
        <div class="nav-sep"></div>
        <div class="nav-section-label">System</div>
        <a href="{{ route('settings') }}" class="nav-item active">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Settings
        </a>
    </aside>

    <!-- MAIN -->
    <main>

        @if(session('success'))
        <div id="settings-toast" style="position:fixed;bottom:2rem;right:2rem;background:#0f0f0f;color:#fff;padding:1rem 1.4rem;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.28);display:flex;align-items:center;gap:.85rem;z-index:9999;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);font-size:.9rem;font-weight:600;min-width:260px;max-width:380px;">
            <div style="width:36px;height:36px;border-radius:50%;background:rgba(37,211,102,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="#25d366" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div style="flex:1;">
                <div style="font-size:.88rem;font-weight:700;color:#fff;margin-bottom:.1rem;">Settings Saved</div>
                <div style="font-size:.78rem;color:#9ca3af;font-weight:400;">All changes have been applied</div>
            </div>
            <button onclick="dismissToast()" style="background:none;border:none;color:#4b5563;cursor:pointer;padding:.2rem;display:flex;transition:.15s;" onmouseover="this.style.color='#9ca3af'" onmouseout="this.style.color='#4b5563'">
                <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <script>
            function dismissToast() {
                const t = document.getElementById('settings-toast');
                if (t) { t.style.animation = 'toastOut .25s ease both'; setTimeout(() => t.remove(), 250); }
            }
            setTimeout(dismissToast, 4000);
        </script>
        @endif

        <div class="page-header">
            <div>
                <h1>Settings</h1>
                <p>Configure your WhatsApp Cloud API system</p>
            </div>
        </div>

        <form method="POST" action="{{ route('settings.update') }}" enctype="multipart/form-data">
        @csrf
        <div class="settings-layout">

            <!-- LEFT TABS -->
            <div class="settings-tabs">
                <div class="s-tab active" onclick="switchTab('system', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/></svg>
                    System
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('storage', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                    Storage
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('locale', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
                    Language & Time
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('pusher', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    Notifications
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('sending', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                    Sending
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('logs', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    App Logs
                </div>
                <div class="s-tab-sep"></div>
                <div class="s-tab" onclick="switchTab('activity', this)">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Activity Logs
                </div>
            </div>

            <!-- RIGHT PANELS -->
            <div class="settings-content">

                <!-- ═══ SYSTEM ═══ -->
                <div class="s-panel active" id="panel-system">
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">⚙️</span>
                            <h3>System Settings</h3>
                        </div>
                        <div class="s-card-body">
                            <div class="s-field">
                                <label class="s-label">App Logo</label>
                                @php $logoFile = $settings['app_logo'] ?? ''; @endphp
                                @if($logoFile && file_exists(public_path('uploads/' . $logoFile)))
                                <div style="margin-bottom:.6rem;">
                                    <img src="{{ asset('uploads/' . $logoFile) }}" style="height:56px;width:auto;max-width:180px;object-fit:contain;border-radius:10px;border:1.5px solid #e5e7eb;background:#f8fafc;padding:6px;">
                                </div>
                                @endif
                                <input type="file" name="app_logo" accept="image/png,image/jpeg,image/svg+xml,image/gif,image/webp" class="s-input" style="padding:.4rem .9rem;cursor:pointer;">
                                <span class="s-hint">PNG, JPG, SVG or WebP. Shown in the header on all pages and on the login/register screens.</span>
                            </div>
                            <div class="s-field">
                                <label class="s-label">Project Name</label>
                                <input type="text" name="project_name" class="s-input" value="{{ $settings['project_name'] ?? 'On Cloud API' }}">
                            </div>
                            <div class="s-field">
                                <label class="s-label">Link to Your App</label>
                                <input type="url" name="site_url" class="s-input" value="{{ $settings['site_url'] ?? '' }}" placeholder="https://apps.yourdomain.com/">
                                <span class="s-hint">This is the main URL of your app. It is used system-wide — for API callbacks, cronjob URLs, webhook endpoints, notification links, and all external references generated by the system.</span>
                            </div>
                            <div class="s-field">
                                <label class="s-label">Subdomains</label>
                                <input type="text" name="subdomains" class="s-input" value="{{ $settings['subdomains'] ?? '' }}" placeholder="www,apps">
                                <span class="s-hint">List the subdomains your app responds to, separated by commas. Example: if your app runs at <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.78rem;">app.yourdomain.com</code>, enter <strong>app</strong>. Multiple: <strong>www,app,api</strong></span>
                            </div>
                            <div class="s-field">
                                <label class="s-label">Pagination Count</label>
                                <input type="number" name="pagination_count" class="s-input" value="{{ $settings['pagination_count'] ?? 100 }}" min="10" max="500" style="max-width:160px;">
                            </div>

                            <div style="border-top:1px solid #f1f5f9;padding-top:1rem;display:flex;flex-direction:column;gap:.85rem;">
                                <div class="toggle-row">
                                    <div class="toggle-info">
                                        <div class="s-label">
                                            🚨 App Debugging
                                            <span class="badge-warn">Caution</span>
                                        </div>
                                        <div class="s-hint">Enable if you experience error 500</div>
                                    </div>
                                    <label class="toggle-switch">
                                        <input type="checkbox" name="app_debugging" {{ ($settings['app_debugging'] ?? '0') == '1' ? 'checked' : '' }}>
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>
                                <div class="toggle-row">
                                    <div class="toggle-info">
                                        <div class="s-label">Disable Landing Page</div>
                                        <div class="s-hint">Project starts from login page. Best used with a subdomain.</div>
                                    </div>
                                    <label class="toggle-switch">
                                        <input type="checkbox" name="disable_landing_page" {{ ($settings['disable_landing_page'] ?? '0') == '1' ? 'checked' : '' }}>
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>
                                <div class="toggle-row">
                                    <div class="toggle-info">
                                        <div class="s-label">Wildcard Domain</div>
                                        <div class="s-hint">Enable this once you have added a wildcard DNS record (<code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.78rem;">*.yourdomain.com → your server IP</code>) in your DNS provider. This allows each store/shop to get its own subdomain like <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.78rem;">shopname.yourdomain.com</code> automatically.</div>
                                    </div>
                                    <label class="toggle-switch">
                                        <input type="checkbox" name="wildcard_domain" {{ ($settings['wildcard_domain'] ?? '0') == '1' ? 'checked' : '' }}>
                                        <span class="toggle-track"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="save-bar">
                        <button type="submit" class="btn-save">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Save Settings
                        </button>
                    </div>
                </div>

                <!-- ═══ STORAGE ═══ -->
                <div class="s-panel" id="panel-storage">
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">☁️</span>
                            <h3>Storage Settings</h3>
                        </div>
                        <div class="s-card-body">
                            <div class="s-field">
                                <label class="s-label">File System for Storage</label>
                                <span class="s-hint">Where the system will store uploaded media — images, videos, audio files, documents.</span>
                                <div class="storage-opts" style="margin-top:.5rem;">
                                    <label class="storage-opt {{ ($settings['file_storage'] ?? 'local') == 'local' ? 'selected' : '' }}" onclick="selectStorage(this,'local')">
                                        <input type="radio" name="file_storage" value="local" {{ ($settings['file_storage'] ?? 'local') == 'local' ? 'checked' : '' }}>
                                        <span class="so-icon">💾</span>
                                        <div>
                                            <div class="so-name">Local</div>
                                            <div class="so-sub">Server filesystem</div>
                                        </div>
                                    </label>
                                    <label class="storage-opt {{ ($settings['file_storage'] ?? 'local') == 's3' ? 'selected' : '' }}" onclick="selectStorage(this,'s3')">
                                        <input type="radio" name="file_storage" value="s3" {{ ($settings['file_storage'] ?? 'local') == 's3' ? 'checked' : '' }}>
                                        <span class="so-icon">🪣</span>
                                        <div>
                                            <div class="so-name">Amazon S3</div>
                                            <div class="so-sub">AWS cloud storage</div>
                                        </div>
                                    </label>
                                    <label class="storage-opt {{ ($settings['file_storage'] ?? 'local') == 'spaces' ? 'selected' : '' }}" onclick="selectStorage(this,'spaces')">
                                        <input type="radio" name="file_storage" value="spaces" {{ ($settings['file_storage'] ?? 'local') == 'spaces' ? 'checked' : '' }}>
                                        <span class="so-icon">🌊</span>
                                        <div>
                                            <div class="so-name">DigitalOcean Spaces</div>
                                            <div class="so-sub">S3-compatible storage</div>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <!-- Local storage info -->
                            <div id="localInfo" style="{{ in_array($settings['file_storage'] ?? 'local', ['s3','spaces']) ? 'display:none;' : '' }}">
                                <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:.9rem 1.1rem;display:flex;gap:.75rem;">
                                    <span style="font-size:1.2rem;flex-shrink:0;">📁</span>
                                    <div>
                                        <div style="font-size:.83rem;font-weight:700;color:#15803d;margin-bottom:.3rem;">Local Storage — Files saved on this server</div>
                                        <div style="font-size:.78rem;color:#166534;line-height:1.6;">All uploaded files are stored in <code style="background:#dcfce7;padding:.1rem .35rem;border-radius:4px;">storage/app/public/uploads/</code> on your server. Files are served via <code style="background:#dcfce7;padding:.1rem .35rem;border-radius:4px;">public/uploads/</code> symlink. Make sure <code style="background:#dcfce7;padding:.1rem .35rem;border-radius:4px;">php artisan storage:link</code> has been run.</div>
                                    </div>
                                </div>
                            </div>

                            <!-- S3/Spaces info + composer note -->
                            <div id="s3Info" style="{{ in_array($settings['file_storage'] ?? 'local', ['s3','spaces']) ? '' : 'display:none;' }}">
                                <div style="background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:.9rem 1.1rem;display:flex;gap:.75rem;margin-bottom:.75rem;">
                                    <span style="font-size:1.2rem;flex-shrink:0;">☁️</span>
                                    <div>
                                        <div style="font-size:.83rem;font-weight:700;color:#1d4ed8;margin-bottom:.3rem;">Cloud Storage — Files saved on AWS / Spaces</div>
                                        <div style="font-size:.78rem;color:#1e40af;line-height:1.6;">All uploaded files will be stored directly in your S3 bucket and served via the Bucket Public URL. The app server does <strong>not</strong> store any media files locally. Make sure to fill in all S3 credentials below and run the install command to enable S3 support in Laravel.</div>
                                    </div>
                                </div>
                                <div style="background:#0f172a;border-radius:10px;padding:.85rem 1.1rem;">
                                    <div style="font-size:.72rem;font-weight:700;color:#64748b;margin-bottom:.5rem;letter-spacing:.8px;text-transform:uppercase;">Required — Run this in your terminal to install the S3 driver:</div>
                                    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;">
                                        <code style="font-family:'SFMono-Regular',Consolas,monospace;font-size:.82rem;color:#34d399;">composer require league/flysystem-aws-s3-v3 "^3.0"</code>
                                        <button type="button" onclick="copyComposer(this)" style="flex-shrink:0;background:#1e293b;border:none;color:#94a3b8;padding:.35rem .7rem;border-radius:6px;font-size:.72rem;cursor:pointer;transition:.15s;">Copy</button>
                                    </div>
                                </div>
                            </div>

                            <div id="s3Fields" style="{{ in_array($settings['file_storage'] ?? 'local', ['s3','spaces']) ? '' : 'display:none;' }}">
                                <div style="height:1px;background:#f1f5f9;margin:.2rem 0 1rem;"></div>
                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                                    <div class="s-field">
                                        <label class="s-label">S3 AWS_ACCESS_KEY</label>
                                        <input type="text" name="aws_access_key" class="s-input" value="{{ $settings['aws_access_key'] ?? '' }}" placeholder="AKIA...">
                                    </div>
                                    <div class="s-field">
                                        <label class="s-label">S3 AWS_SECRET_ACCESS_KEY</label>
                                        <input type="password" name="aws_secret_key" class="s-input" value="{{ $settings['aws_secret_key'] ?? '' }}" placeholder="••••••••">
                                    </div>
                                    <div class="s-field">
                                        <label class="s-label">S3 AWS_DEFAULT_REGION</label>
                                        <input type="text" name="aws_region" class="s-input" value="{{ $settings['aws_region'] ?? '' }}" placeholder="us-east-1">
                                    </div>
                                    <div class="s-field">
                                        <label class="s-label">S3 AWS_BUCKET</label>
                                        <input type="text" name="aws_bucket" class="s-input" value="{{ $settings['aws_bucket'] ?? '' }}" placeholder="my-bucket-name">
                                    </div>
                                    <div class="s-field" style="grid-column:1/-1;">
                                        <label class="s-label">S3 Bucket Public URL</label>
                                        <div style="display:flex;gap:.5rem;align-items:center;">
                                            <input type="url" name="aws_bucket_url" class="s-input" value="{{ $settings['aws_bucket_url'] ?? '' }}" placeholder="https://my-bucket.s3.amazonaws.com  or  https://cdn.yourdomain.com">
                                            @if(!empty($settings['aws_bucket_url']))
                                            <a href="{{ $settings['aws_bucket_url'] }}" target="_blank" style="flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;background:#f0fdf4;border:1.5px solid #bbf7d0;color:#15803d;padding:.55rem .9rem;border-radius:9px;font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap;">
                                                <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                                Open
                                            </a>
                                            @endif
                                        </div>
                                        <span class="s-hint">The public base URL where your bucket files are served. Used to build media links throughout the app.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="save-bar">
                        <button type="submit" class="btn-save">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Save Settings
                        </button>
                    </div>
                </div>

                <!-- ═══ LANGUAGE & TIME ═══ -->
                <div class="s-panel" id="panel-locale">
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">🌐</span>
                            <h3>Language Settings</h3>
                        </div>
                        <div class="s-card-body">
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                                <div class="s-field">
                                    <label class="s-label">Default Language</label>
                                    <select name="default_language" class="s-select">
                                        <option value="EN" {{ ($settings['default_language'] ?? 'EN') == 'EN' ? 'selected' : '' }}>English</option>
                                        <option value="FR" {{ ($settings['default_language'] ?? '') == 'FR' ? 'selected' : '' }}>French</option>
                                        <option value="AR" {{ ($settings['default_language'] ?? '') == 'AR' ? 'selected' : '' }}>Arabic</option>
                                        <option value="ES" {{ ($settings['default_language'] ?? '') == 'ES' ? 'selected' : '' }}>Spanish</option>
                                        <option value="DE" {{ ($settings['default_language'] ?? '') == 'DE' ? 'selected' : '' }}>German</option>
                                        <option value="PT" {{ ($settings['default_language'] ?? '') == 'PT' ? 'selected' : '' }}>Portuguese</option>
                                        <option value="TR" {{ ($settings['default_language'] ?? '') == 'TR' ? 'selected' : '' }}>Turkish</option>
                                        <option value="UR" {{ ($settings['default_language'] ?? '') == 'UR' ? 'selected' : '' }}>Urdu</option>
                                    </select>
                                    <span class="s-hint">If you make a change, ensure you have added the new language in Translations.</span>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Default Phone Country Code</label>
                                    <input type="text" name="phone_country_code" class="s-input" value="{{ $settings['phone_country_code'] ?? 'US' }}" placeholder="US" maxlength="2">
                                    <span class="s-hint">2 characters — ISO 3166-1 alpha-2 format</span>
                                </div>
                            </div>
                            <div class="s-field">
                                <label class="s-label">List of Available Languages on Landing Page</label>
                                <input type="text" name="available_languages" class="s-input" value="{{ $settings['available_languages'] ?? 'EN,English,FR,French' }}" placeholder="EN,English,FR,French">
                                <span class="s-hint">Format: <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.78rem;">CODE,Name,CODE,Name</code>. If only one language, the picker won't show.</span>
                            </div>
                        </div>
                    </div>

                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">⏰</span>
                            <h3>Date, Time & Currency</h3>
                        </div>
                        <div class="s-card-body">
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                                <div class="s-field">
                                    <label class="s-label">Time Zone</label>
                                    <select name="timezone" class="s-select">
                                        @php
                                        $zones = [
                                            'UTC'              => '(UTC+00:00) UTC',
                                            'America/New_York' => '(UTC-05:00) New York',
                                            'America/Chicago'  => '(UTC-06:00) Chicago',
                                            'America/Denver'   => '(UTC-07:00) Denver',
                                            'America/Los_Angeles'=>'(UTC-08:00) Los Angeles',
                                            'Europe/London'    => '(UTC+00:00) London',
                                            'Europe/Paris'     => '(UTC+01:00) Paris',
                                            'Europe/Istanbul'  => '(UTC+03:00) Istanbul',
                                            'Asia/Dubai'       => '(UTC+04:00) Dubai',
                                            'Asia/Karachi'     => '(UTC+05:00) Karachi',
                                            'Asia/Kolkata'     => '(UTC+05:30) Kolkata',
                                            'Asia/Dhaka'       => '(UTC+06:00) Dhaka',
                                            'Asia/Bangkok'     => '(UTC+07:00) Bangkok',
                                            'Asia/Singapore'   => '(UTC+08:00) Singapore',
                                            'Asia/Tokyo'       => '(UTC+09:00) Tokyo',
                                            'Australia/Sydney' => '(UTC+10:00) Sydney',
                                        ];
                                        @endphp
                                        @foreach($zones as $tz => $label)
                                        <option value="{{ $tz }}" {{ ($settings['timezone'] ?? 'Asia/Karachi') == $tz ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Default Currency</label>
                                    <select name="default_currency" class="s-select">
                                        @php
                                        $currencies = [
                                            'USD' => 'US Dollar - $ - USD',
                                            'EUR' => 'Euro - € - EUR',
                                            'GBP' => 'British Pound - £ - GBP',
                                            'PKR' => 'Pakistani Rupee - ₨ - PKR',
                                            'INR' => 'Indian Rupee - ₹ - INR',
                                            'AED' => 'UAE Dirham - AED',
                                            'SAR' => 'Saudi Riyal - SAR',
                                            'TRY' => 'Turkish Lira - ₺ - TRY',
                                            'BRL' => 'Brazilian Real - R$ - BRL',
                                        ];
                                        @endphp
                                        @foreach($currencies as $code => $label)
                                        <option value="{{ $code }}" {{ ($settings['default_currency'] ?? 'USD') == $code ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Time Format</label>
                                    <select name="time_format" class="s-select">
                                        <option value="AM/PM"  {{ ($settings['time_format'] ?? 'AM/PM') == 'AM/PM'  ? 'selected':'' }}>AM/PM (12-hour)</option>
                                        <option value="24H"    {{ ($settings['time_format'] ?? '') == '24H'         ? 'selected':'' }}>24-hour</option>
                                    </select>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Date & Time Display Format</label>
                                    <input type="text" name="date_format" class="s-input" value="{{ $settings['date_format'] ?? 'd M Y h:i A' }}" placeholder="d M Y h:i A">
                                    <span class="s-hint">PHP date format string</span>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Working Time Display Format</label>
                                    <input type="text" name="working_time_format" class="s-input" value="{{ $settings['working_time_format'] ?? 'E HH:mm' }}" placeholder="E HH:mm">
                                    <span class="s-hint">For 24h use <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.76rem;">E HH:mm</code>, for AM/PM use <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.76rem;">E h:mm a</code></span>
                                </div>
                            </div>

                            <div class="toggle-row" style="border-top:1px solid #f1f5f9;padding-top:1rem;">
                                <div class="toggle-info">
                                    <div class="s-label">Money Conversion</div>
                                    <div class="s-hint">Some currencies need this unselected. By default it should be selected.</div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="money_conversion" {{ ($settings['money_conversion'] ?? '1') == '1' ? 'checked' : '' }}>
                                    <span class="toggle-track"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="save-bar">
                        <button type="submit" class="btn-save">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Save Settings
                        </button>
                    </div>
                </div>

                <!-- ═══ PUSHER ═══ -->
                <div class="s-panel" id="panel-pusher">
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">📢</span>
                            <h3>Pusher Live Notifications</h3>
                        </div>
                        <div class="s-card-body">
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                                <div class="s-field">
                                    <label class="s-label">Pusher App ID</label>
                                    <input type="text" name="pusher_app_id" class="s-input" value="{{ $settings['pusher_app_id'] ?? '' }}" placeholder="1822918">
                                    <span class="s-hint">Used for live notifications</span>
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Pusher App Key</label>
                                    <input type="text" name="pusher_app_key" class="s-input" value="{{ $settings['pusher_app_key'] ?? '' }}" placeholder="178065a...">
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Pusher App Secret</label>
                                    <input type="password" name="pusher_app_secret" class="s-input" value="{{ $settings['pusher_app_secret'] ?? '' }}" placeholder="••••••••">
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Pusher App Cluster</label>
                                    <input type="text" name="pusher_app_cluster" class="s-input" value="{{ $settings['pusher_app_cluster'] ?? 'mt1' }}" placeholder="mt1">
                                </div>
                                <div class="s-field">
                                    <label class="s-label">Broadcast Driver</label>
                                    <select name="broadcast_driver" class="s-select">
                                        <option value="pusher" {{ ($settings['broadcast_driver'] ?? 'pusher') == 'pusher' ? 'selected' : '' }}>Pusher</option>
                                        <option value="ably"   {{ ($settings['broadcast_driver'] ?? '') == 'ably'   ? 'selected' : '' }}>Ably</option>
                                        <option value="redis"  {{ ($settings['broadcast_driver'] ?? '') == 'redis'  ? 'selected' : '' }}>Redis</option>
                                        <option value="log"    {{ ($settings['broadcast_driver'] ?? '') == 'log'    ? 'selected' : '' }}>Log (debug)</option>
                                        <option value="null"   {{ ($settings['broadcast_driver'] ?? '') == 'null'   ? 'selected' : '' }}>Null (disabled)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="save-bar">
                        <button type="submit" class="btn-save">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Save Settings
                        </button>
                    </div>
                </div>

                <!-- ═══ SENDING ═══ -->
                <div class="s-panel" id="panel-sending">

                    <!-- Card 1: Background Sending -->
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">⚙️</span>
                            <h3>Background Message Sending</h3>
                        </div>
                        <div class="s-card-body">
                            <span class="s-hint" style="font-size:.82rem;color:#6b7280;line-height:1.6;">
                                Choose how messages are dispatched in the background. <strong>Cronjob</strong> uses your server's scheduled task to send messages. <strong>Database Queue</strong> uses Laravel's queue worker (<code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;font-size:.78rem;">php artisan queue:work</code>) for reliable background processing.
                            </span>
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:.25rem;">
                                <label class="send-opt {{ ($settings['msg_sending_mode'] ?? 'database') == 'cronjob' ? 'selected' : '' }}" onclick="selectSendOpt(this,'msg_sending_mode','cronjob')">
                                    <input type="radio" name="msg_sending_mode" value="cronjob" {{ ($settings['msg_sending_mode'] ?? 'database') == 'cronjob' ? 'checked' : '' }} style="display:none;">
                                    <div class="send-opt-icon">⏱️</div>
                                    <div>
                                        <div class="send-opt-title">Cronjob</div>
                                        <div class="send-opt-sub">Sends via scheduled server cronjob</div>
                                    </div>
                                </label>
                                <label class="send-opt {{ ($settings['msg_sending_mode'] ?? 'database') == 'database' ? 'selected' : '' }}" onclick="selectSendOpt(this,'msg_sending_mode','database')">
                                    <input type="radio" name="msg_sending_mode" value="database" {{ ($settings['msg_sending_mode'] ?? 'database') == 'database' ? 'checked' : '' }} style="display:none;">
                                    <div class="send-opt-icon">🗄️</div>
                                    <div>
                                        <div class="send-opt-title">Database Queue</div>
                                        <div class="send-opt-sub">Uses Laravel queue worker</div>
                                    </div>
                                </label>
                            </div>
                            <!-- Context hint -->
                            <div id="hint-msg-cronjob" style="{{ ($settings['msg_sending_mode'] ?? 'database') == 'cronjob' ? '' : 'display:none;' }}">
                                <div style="background:#fefce8;border:1.5px solid #fde68a;border-radius:9px;padding:.8rem 1rem;display:flex;gap:.65rem;margin-top:.25rem;">
                                    <span style="font-size:1rem;flex-shrink:0;">⏱️</span>
                                    <div style="font-size:.78rem;color:#92400e;line-height:1.6;">Add this to your server crontab: <code style="background:#fef9c3;padding:.1rem .35rem;border-radius:4px;">* * * * * php /path/to/artisan schedule:run >> /dev/null 2>&1</code></div>
                                </div>
                            </div>
                            <div id="hint-msg-database" style="{{ ($settings['msg_sending_mode'] ?? 'database') == 'database' ? '' : 'display:none;' }}">
                                <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:9px;padding:.8rem 1rem;display:flex;gap:.65rem;margin-top:.25rem;">
                                    <span style="font-size:1rem;flex-shrink:0;">🗄️</span>
                                    <div style="font-size:.78rem;color:#166534;line-height:1.6;">Start your queue worker: <code style="background:#dcfce7;padding:.1rem .35rem;border-radius:4px;">php artisan queue:work --queue=default</code> — keep it running with Supervisor in production.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2: Async Sending -->
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">⚡</span>
                            <h3>Async Message Sending</h3>
                        </div>
                        <div class="s-card-body">
                            <span class="s-hint" style="font-size:.82rem;color:#6b7280;line-height:1.6;">
                                Choose how individual messages are dispatched. <strong>Instant (Sync)</strong> sends each message immediately — faster but blocks the request. <strong>Database Queue</strong> pushes to a queue job for async delivery.
                            </span>
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:.25rem;">
                                <label class="send-opt {{ ($settings['async_sending_mode'] ?? 'database') == 'instant' ? 'selected' : '' }}" onclick="selectSendOpt(this,'async_sending_mode','instant')">
                                    <input type="radio" name="async_sending_mode" value="instant" {{ ($settings['async_sending_mode'] ?? 'database') == 'instant' ? 'checked' : '' }} style="display:none;">
                                    <div class="send-opt-icon">⚡</div>
                                    <div>
                                        <div class="send-opt-title">Instant (Sync)</div>
                                        <div class="send-opt-sub">Sends immediately, blocks request</div>
                                    </div>
                                </label>
                                <label class="send-opt {{ ($settings['async_sending_mode'] ?? 'database') == 'database' ? 'selected' : '' }}" onclick="selectSendOpt(this,'async_sending_mode','database')">
                                    <input type="radio" name="async_sending_mode" value="database" {{ ($settings['async_sending_mode'] ?? 'database') == 'database' ? 'checked' : '' }} style="display:none;">
                                    <div class="send-opt-icon">🗄️</div>
                                    <div>
                                        <div class="send-opt-title">Database Queue</div>
                                        <div class="send-opt-sub">Async via Laravel queue</div>
                                    </div>
                                </label>
                            </div>
                            <div id="hint-async-instant" style="{{ ($settings['async_sending_mode'] ?? 'database') == 'instant' ? '' : 'display:none;' }}">
                                <div style="background:#fff7ed;border:1.5px solid #fed7aa;border-radius:9px;padding:.8rem 1rem;display:flex;gap:.65rem;margin-top:.25rem;">
                                    <span style="font-size:1rem;flex-shrink:0;">⚡</span>
                                    <div style="font-size:.78rem;color:#9a3412;line-height:1.6;">Instant sending is fast but may cause request timeouts on large message volumes. Recommended only for low-traffic use.</div>
                                </div>
                            </div>
                            <div id="hint-async-database" style="{{ ($settings['async_sending_mode'] ?? 'database') == 'database' ? '' : 'display:none;' }}">
                                <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:9px;padding:.8rem 1rem;display:flex;gap:.65rem;margin-top:.25rem;">
                                    <span style="font-size:1rem;flex-shrink:0;">🗄️</span>
                                    <div style="font-size:.78rem;color:#166534;line-height:1.6;">Messages are pushed to the queue and processed by the queue worker. Best for scalability and reliability.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: Campaign Batch Size -->
                    <div class="s-card">
                        <div class="s-card-head">
                            <span class="s-card-icon">📦</span>
                            <h3>Campaign Sending Batch Size</h3>
                        </div>
                        <div class="s-card-body">
                            <span class="s-hint" style="font-size:.82rem;color:#6b7280;line-height:1.6;">
                                Number of messages sent per batch during campaign processing. Smaller batches are gentler on the API; larger batches send faster. <strong>Maximum allowed: 150.</strong>
                            </span>
                            <div style="display:flex;align-items:flex-end;gap:1rem;margin-top:.35rem;">
                                <div class="s-field" style="max-width:200px;">
                                    <label class="s-label">Messages Per Batch</label>
                                    <div style="position:relative;display:flex;align-items:center;">
                                        <input type="number" name="campaign_batch_size" id="batchSizeInput"
                                            class="s-input"
                                            value="{{ $settings['campaign_batch_size'] ?? 50 }}"
                                            min="1" max="150"
                                            oninput="validateBatch(this)"
                                            style="padding-right:2.8rem;font-size:1.15rem;font-weight:700;text-align:center;">
                                        <span style="position:absolute;right:.75rem;font-size:.75rem;color:#9ca3af;font-weight:600;pointer-events:none;">/ 150</span>
                                    </div>
                                    <div id="batch-error" style="display:none;margin-top:.3rem;font-size:.78rem;color:#ef4444;font-weight:600;">
                                        ⚠️ Maximum batch size is 150 messages
                                    </div>
                                </div>
                                <div style="padding-bottom:.1rem;">
                                    <div style="display:flex;align-items:center;gap:1.5rem;">
                                        @foreach([10,25,50,100,150] as $preset)
                                        <button type="button" onclick="setBatch({{ $preset }})"
                                            style="background:{{ ($settings['campaign_batch_size'] ?? 50) == $preset ? '#25d366' : '#f1f5f9' }};color:{{ ($settings['campaign_batch_size'] ?? 50) == $preset ? '#000' : '#6b7280' }};border:none;padding:.35rem .7rem;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;transition:.15s;"
                                            id="preset-{{ $preset }}">{{ $preset }}</button>
                                        @endforeach
                                    </div>
                                    <div style="font-size:.72rem;color:#9ca3af;margin-top:.4rem;">Quick presets</div>
                                </div>
                            </div>
                            <!-- Visual bar -->
                            <div style="margin-top:.85rem;">
                                <div style="display:flex;justify-content:space-between;font-size:.72rem;color:#9ca3af;margin-bottom:.35rem;">
                                    <span>1</span><span style="color:#25d366;font-weight:600;" id="batch-bar-label">{{ $settings['campaign_batch_size'] ?? 50 }}</span><span>150</span>
                                </div>
                                <div style="height:6px;background:#f1f5f9;border-radius:6px;overflow:hidden;">
                                    <div id="batch-bar" style="height:100%;background:linear-gradient(90deg,#25d366,#128c7e);border-radius:6px;transition:.2s;width:{{ min(100, round((($settings['campaign_batch_size'] ?? 50)/150)*100)) }}%;"></div>
                                </div>
                                <div style="display:flex;justify-content:space-between;font-size:.7rem;color:#d1d5db;margin-top:.3rem;">
                                    <span>Conservative</span><span>Fast</span><span>Maximum</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="save-bar">
                        <button type="submit" class="btn-save">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Save Settings
                        </button>
                    </div>
                </div>

                <!-- ═══ LOGS ═══ -->
                <div class="s-panel" id="panel-logs">
                    <div class="s-card">
                        <div class="s-card-head" style="justify-content:space-between;">
                            <div style="display:flex;align-items:center;gap:.6rem;">
                                <span class="s-card-icon">📋</span>
                                <h3>Application Logs</h3>
                            </div>
                            <div style="display:flex;align-items:center;gap:.75rem;">
                                @php
                                    $errCount  = collect($logEntries)->where('level','ERROR')->count();
                                    $warnCount = collect($logEntries)->where('level','WARNING')->count();
                                @endphp
                                @if($errCount)
                                <span style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;padding:.2rem .6rem;border-radius:6px;font-size:.72rem;font-weight:800;">{{ $errCount }} ERROR{{ $errCount>1?'S':'' }}</span>
                                @endif
                                @if($warnCount)
                                <span style="background:#fffbeb;color:#d97706;border:1px solid #fde68a;padding:.2rem .6rem;border-radius:6px;font-size:.72rem;font-weight:800;">{{ $warnCount }} WARN{{ $warnCount>1?'S':'' }}</span>
                                @endif
                                <span style="font-size:.75rem;color:#9ca3af;">Last 80 entries</span>
                            </div>
                        </div>
                        <div style="padding:1rem 1.25rem;">

                            @if(empty($logEntries))
                            <div class="log-empty-state">
                                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="#d1d5db" stroke-width="1.5" style="margin:0 auto .75rem;display:block;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                No log entries found. Logs appear in <code style="background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;">storage/logs/laravel.log</code>
                            </div>
                            @else

                            <!-- Filter bar -->
                            <div class="log-filters">
                                <button type="button" class="lf-btn active" onclick="filterLogs('all',this)">All ({{ count($logEntries) }})</button>
                                @if($errCount)<button type="button" class="lf-btn f-error" onclick="filterLogs('ERROR',this)">🔴 Errors ({{ $errCount }})</button>@endif
                                @if($warnCount)<button type="button" class="lf-btn f-warning" onclick="filterLogs('WARNING',this)">🟡 Warnings ({{ $warnCount }})</button>@endif
                                <button type="button" class="lf-btn f-info" onclick="filterLogs('INFO',this)">🟢 Info</button>
                                <input type="text" class="log-search" id="logSearch" placeholder="Search logs…" oninput="searchLogs(this.value)">
                                <span class="log-stats" id="logStats">Showing {{ count($logEntries) }}</span>
                            </div>

                            <!-- Log entries — flat list, no toggle -->
                            <div class="log-list" id="logList">
                                @foreach($logEntries as $entry)
                                @php
                                    $lvlClass = match($entry['level']) {
                                        'ERROR'   => 'lvl-error',
                                        'WARNING' => 'lvl-warning',
                                        'INFO'    => 'lvl-info',
                                        'DEBUG'   => 'lvl-debug',
                                        default   => 'lvl-default',
                                    };
                                    $bgClass = match($entry['level']) {
                                        'ERROR'   => 'le-error',
                                        'WARNING' => 'le-warning',
                                        'INFO'    => 'le-info',
                                        'DEBUG'   => 'le-debug',
                                        default   => 'le-default',
                                    };
                                    $hasTrace = !empty(trim($entry['trace']));
                                    $ts = $entry['timestamp']
                                        ? \Carbon\Carbon::parse($entry['timestamp'])->format('d M Y · h:i:s A')
                                        : '';
                                @endphp
                                <div class="log-entry {{ $bgClass }}" data-level="{{ $entry['level'] }}" data-msg="{{ strtolower($entry['message']) }}">
                                    <div class="log-entry-body">
                                        <span class="log-level {{ $lvlClass }}">{{ $entry['level'] }}</span>
                                        <div class="log-meta">
                                            <div class="log-msg">{{ $entry['message'] }}</div>
                                            @if($ts)<div class="log-time">🕐 {{ $ts }}</div>@endif
                                        </div>
                                    </div>
                                    @if($hasTrace)
                                    <div class="log-trace-block">
                                        <pre>{{ $entry['trace'] }}</pre>
                                    </div>
                                    @endif
                                </div>
                                @endforeach
                            </div>

                            @endif
                        </div>
                    </div>
                </div>

                <!-- ═══ ACTIVITY LOGS ═══ -->
                <div class="s-panel" id="panel-activity">
                    <div class="s-card">
                        <div class="s-card-head" style="justify-content:space-between;">
                            <div style="display:flex;align-items:center;gap:.6rem;">
                                <span class="s-card-icon">⏱️</span>
                                <h3>Activity Logs</h3>
                            </div>
                            <span style="background:#fef3c7;color:#b45309;border:1px solid #fde68a;padding:.2rem .65rem;border-radius:6px;font-size:.72rem;font-weight:700;">Coming Soon</span>
                        </div>
                        <div style="padding:3rem 2rem;text-align:center;">
                            <div style="width:64px;height:64px;background:#f8fafc;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.8rem;">📊</div>
                            <h3 style="font-size:1rem;font-weight:800;color:#0f0f0f;margin-bottom:.5rem;">Activity Logs Coming Soon</h3>
                            <p style="font-size:.85rem;color:#9ca3af;max-width:380px;margin:0 auto;line-height:1.6;">This section will track all user actions — logins, company changes, plan updates, campaign sends, and more. Full audit trail with timestamps and user info.</p>
                        </div>
                    </div>
                </div>

            </div><!-- /settings-content -->
        </div><!-- /settings-layout -->
        </form>

    </main>
</div>

<script>
    /* ── Settings tabs ── */
    function switchTab(name, el) {
        document.querySelectorAll('.s-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.s-panel').forEach(p => p.classList.remove('active'));
        el.classList.add('active');
        document.getElementById('panel-' + name).classList.add('active');
    }

    /* ── Log viewer ── */
    function filterLogs(level, btn) {
        document.querySelectorAll('.lf-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const entries = document.querySelectorAll('#logList .log-entry');
        let shown = 0;
        entries.forEach(el => {
            const match = level === 'all' || el.dataset.level === level;
            el.style.display = match ? '' : 'none';
            if (match) shown++;
        });
        document.getElementById('logStats').textContent = 'Showing ' + shown;
    }
    function searchLogs(q) {
        q = q.toLowerCase();
        const entries = document.querySelectorAll('#logList .log-entry');
        let shown = 0;
        entries.forEach(el => {
            const match = !q || el.dataset.msg.includes(q);
            el.style.display = match ? '' : 'none';
            if (match) shown++;
        });
        document.getElementById('logStats').textContent = 'Showing ' + shown;
    }

    /* ── Storage selector ── */
    function selectStorage(el, val) {
        document.querySelectorAll('.storage-opt').forEach(o => o.classList.remove('selected'));
        el.classList.add('selected');
        el.querySelector('input').checked = true;
        const isCloud = (val === 's3' || val === 'spaces');
        document.getElementById('s3Fields').style.display  = isCloud ? '' : 'none';
        document.getElementById('s3Info').style.display    = isCloud ? '' : 'none';
        document.getElementById('localInfo').style.display = isCloud ? 'none' : '';
    }

    /* ── Send option selector ── */
    function selectSendOpt(el, name, val) {
        // Deselect siblings in same group
        el.closest('.s-card-body').querySelectorAll('.send-opt').forEach(o => o.classList.remove('selected'));
        el.classList.add('selected');
        el.querySelector('input[type=radio]').checked = true;

        // Show/hide context hints
        if (name === 'msg_sending_mode') {
            document.getElementById('hint-msg-cronjob').style.display  = val === 'cronjob'  ? '' : 'none';
            document.getElementById('hint-msg-database').style.display = val === 'database' ? '' : 'none';
        } else if (name === 'async_sending_mode') {
            document.getElementById('hint-async-instant').style.display  = val === 'instant'  ? '' : 'none';
            document.getElementById('hint-async-database').style.display = val === 'database' ? '' : 'none';
        }
    }

    /* ── Batch size ── */
    function validateBatch(inp) {
        let v = parseInt(inp.value) || 1;
        const err = document.getElementById('batch-error');
        if (v > 150) {
            v = 150;
            inp.value = 150;
            err.style.display = 'block';
            setTimeout(() => err.style.display = 'none', 2500);
        }
        if (v < 1) { v = 1; inp.value = 1; }
        updateBatchUI(v);
    }

    function setBatch(v) {
        document.getElementById('batchSizeInput').value = v;
        updateBatchUI(v);
    }

    function updateBatchUI(v) {
        const pct = Math.round((v / 150) * 100);
        document.getElementById('batch-bar').style.width = pct + '%';
        document.getElementById('batch-bar-label').textContent = v;
        // Highlight preset buttons
        [10,25,50,100,150].forEach(p => {
            const btn = document.getElementById('preset-' + p);
            if (!btn) return;
            btn.style.background = p === v ? '#25d366' : '#f1f5f9';
            btn.style.color      = p === v ? '#000'    : '#6b7280';
        });
    }

    /* ── Copy composer command ── */
    function copyComposer(btn) {
        navigator.clipboard.writeText('composer require league/flysystem-aws-s3-v3 "^3.0"').then(() => {
            btn.textContent = 'Copied!';
            btn.style.color = '#34d399';
            setTimeout(() => { btn.textContent = 'Copy'; btn.style.color = ''; }, 2000);
        });
    }

    /* ── Sidebar nav with exit animation ── */
    document.querySelectorAll('.nav-item').forEach(el => {
        el.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            if (!href || href === '#') return;
            e.preventDefault();
            const mainEl = document.querySelector('main');
            mainEl.style.cssText = 'margin-left:248px;flex:1;padding:1.75rem 2rem;animation:fadeOut .18s ease both';
            setTimeout(() => { window.location.href = href; }, 180);
        });
    });
</script>
</body>
</html>
