{{-- resources/views/dashboard/settings/index.blade.php --}}
@extends('layouts.user')
@section('title', 'Settings')

@section('styles')
    <style>
        /* ── Settings tabs ── */



        /* Avatar */
        .pf-av-ring {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            padding: 3px;
            background: linear-gradient(135deg, #4361ee, #7c3aed, #05c168);
            box-shadow: 0 0 28px rgba(67, 97, 238, .45);
            position: relative;
        }

        .pf-av-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #1e2a80, #3730a3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-brand);
            font-size: 34px;
            font-weight: 900;
            color: #fff;
            overflow: hidden;
        }

        .pf-av-inner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .pf-av-badge {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--success);
            border: 3px solid #0f1535;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pf-av-badge i {
            font-size: 10px;
            color: #fff;
        }

        /* Identity */
        .pf-identity {
            flex: 1;
            min-width: 0;
        }

        .stabs {
            display: flex;
            gap: 2px;
            background: var(--surface2);
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 22px;
            border: 1px solid var(--border);
        }

        .stab {
            flex: 1;
            padding: 10px 8px;
            border-radius: 9px;
            border: 0;
            background: transparent;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            cursor: pointer;
            font-family: var(--font);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            transition: background .13s, color .13s;
        }

        .stab i {
            font-size: 16px;
        }

        .stab.active {
            background: var(--surface);
            color: var(--primary);
            box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
        }

        .stab:hover:not(.active) {
            color: var(--text);
        }

        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
        }

        /* Section header */
        .sec-hdr {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 2px solid var(--border);
        }

        .sec-hdr__ico {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sec-hdr__ico--blue {
            background: #eef1ff;
        }

        .sec-hdr__ico--green {
            background: #dcfce7;
        }

        .sec-hdr__ico--gold {
            background: #fef9c3;
        }

        .sec-hdr__ico--purple {
            background: #f3e8ff;
        }

        .sec-hdr__ico i {
            font-size: 22px;
        }

        .sec-hdr__ico--blue i {
            color: var(--primary);
        }

        .sec-hdr__ico--green i {
            color: var(--success);
        }

        .sec-hdr__ico--gold i {
            color: var(--gold);
        }

        .sec-hdr__ico--purple i {
            color: var(--accent);
        }

        .sec-hdr__title {
            font-family: var(--font-brand);
            font-size: 17px;
            font-weight: 700;
            color: var(--text);
        }

        .sec-hdr__sub {
            font-size: 12.5px;
            color: var(--muted);
        }

        /* Info rows */
        .srow {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px solid var(--border);
        }

        .srow:last-child {
            border-bottom: 0;
        }

        .srow__ico {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--surface2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .srow__ico i {
            font-size: 16px;
            color: var(--muted);
        }

        .srow__l {
            font-size: 11.5px;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: 2px;
        }

        .srow__v {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }

        .srow__r {
            margin-left: auto;
            flex-shrink: 0;
        }

        /* Wallet stat tiles */
        .ws-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .ws-tile {
            border-radius: 12px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            border: 1.5px solid var(--border);
            background: var(--surface2);
            transition: border-color .15s, transform .15s;
        }

        .ws-tile:hover {
            border-color: var(--primary);
            transform: translateY(-1px);
        }

        .ws-tile__lbl {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .6px;
        }

        .ws-tile__val {
            font-family: var(--font-brand);
            font-size: 20px;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -.3px;
        }

        .ws-tile__sub {
            font-size: 11.5px;
            color: var(--muted);
        }

        .ws-tile--g {
            border-top: 3px solid var(--success);
        }

        .ws-tile--b {
            border-top: 3px solid var(--primary);
        }

        .ws-tile--y {
            border-top: 3px solid var(--gold);
        }

        .ws-tile--r {
            border-top: 3px solid var(--danger);
        }

        .ws-tile--p {
            border-top: 3px solid var(--accent);
        }

        .ws-tile--t {
            border-top: 3px solid var(--info);
        }

        /* Action buttons grid */
        .act-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px;
        }

        .act-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 18px 12px;
            border-radius: 12px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text2);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            font-family: var(--font);
            transition: border-color .13s, background .13s, color .13s, transform .13s;
        }

        .act-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(67, 97, 238, .1);
        }

        .act-btn__ico {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .act-btn__ico i {
            font-size: 22px;
        }

        .act-btn--d:hover {
            border-color: var(--success);
            color: var(--success);
        }

        .act-btn--d .act-btn__ico {
            background: #dcfce7;
        }

        .act-btn--d .act-btn__ico i {
            color: var(--success);
        }

        .act-btn--w:hover {
            border-color: var(--danger);
            color: var(--danger);
        }

        .act-btn--w .act-btn__ico {
            background: #fee2e2;
        }

        .act-btn--w .act-btn__ico i {
            color: var(--danger);
        }

        .act-btn--s:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .act-btn--s .act-btn__ico {
            background: #eef1ff;
        }

        .act-btn--s .act-btn__ico i {
            color: var(--primary);
        }

        .act-btn--m:hover {
            border-color: var(--info);
            color: var(--info);
        }

        .act-btn--m .act-btn__ico {
            background: #e0f2fe;
        }

        .act-btn--m .act-btn__ico i {
            color: var(--info);
        }

        .act-btn--p:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .act-btn--p .act-btn__ico {
            background: #f3e8ff;
        }

        .act-btn--p .act-btn__ico i {
            color: var(--accent);
        }

        /* Responsive */
        @media (max-width:767px) {
            .stabs {
                flex-wrap: wrap;
            }

            .stab {
                flex: 0 0 calc(50% - 2px);
            }

            .ws-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width:480px) {
            .stab span {
                display: none;
            }

            .ws-grid {
                grid-template-columns: 1fr;
            }

            .act-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
    </style>
@endsection

@section('content')

    <div class="page-hdr">
        <h1 class="page-hdr__title">Settings</h1>
        <div class="page-hdr__right">
            <div class="breadcrumb">
                <i class="icon ion-md-home"></i>
                <a href="{{ route('dashboard.overview') }}">Home</a>
                <i class="icon ion-ios-arrow-forward"></i>
                <span>Settings</span>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="stabs" role="tablist">
        <button class="stab active" data-tab="account" role="tab">
            <i class="icon ion-md-person"></i><span>Account</span>
        </button>
        <button class="stab" data-tab="security" role="tab">
            <i class="icon ion-md-shield-checkmark"></i><span>Security</span>
        </button>
        <button class="stab" data-tab="wallet" role="tab">
            <i class="icon ion-md-wallet"></i><span>Wallet</span>
        </button>
        <button class="stab" data-tab="actions" role="tab">
            <i class="icon ion-md-flash"></i><span>Quick Actions</span>
        </button>
    </div>

    {{-- ─── TAB: Account ─── --}}
    <div class="tab-panel active" id="tab-account">
        <div class="pg-2">

            <div class="card">
                <div class="card__body">
                    <div class="sec-hdr">
                 <div class="pf-av-ring">
                         <div class="pf-av-inner">
                        @if (!empty(auth()->user()->avatar))
                            <img src="{{ Str::startsWith(auth()->user()->avatar, ['http://', 'https://', '/']) ? auth()->user()->avatar : '/' . ltrim(auth()->user()->avatar, '/') }}"
                                alt="avatar">
                        @else
                            {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                        @endif
                    </div>
                 </div>
                        <div>
                            <div class="sec-hdr__title">Personal Information</div>
                            <div class="sec-hdr__sub">Your registered account details</div>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('dashboard.settings.profile.update') }}"
                        enctype="multipart/form-data"
                        style="display:grid;gap:10px;margin-bottom:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);">
                        @csrf
                        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;">
                            <input class="form-control" type="text" name="name"
                                value="{{ old('name', auth()->user()->name) }}" placeholder="Full name" required>
                            <input class="form-control" type="text" name="username"
                                value="{{ old('username', auth()->user()->username) }}" placeholder="Username">
                            <input class="form-control" type="text" name="country"
                                value="{{ old('country', auth()->user()->country) }}" placeholder="Country">
                            <input class="form-control" type="text" name="currency"
                                value="{{ old('currency', auth()->user()->currency) }}" placeholder="Currency">
                        </div>
                        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                            <input class="form-control" type="file" name="avatar" accept="image/*"
                                style="max-width:320px;">
                            <button type="submit" class="btn btn--primary btn--sm">Update Profile</button>
                        </div>
                    </form>

                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-person"></i></div>
                        <div>
                            <div class="srow__l">Full Name</div>
                            <div class="srow__v">{{ auth()->user()->name }}</div>
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-mail"></i></div>
                        <div>
                            <div class="srow__l">Email Address</div>
                            <div class="srow__v">{{ auth()->user()->email }}</div>
                        </div>
                        <div class="srow__r">
                            @if (auth()->user()->email_verified_at)
                                <span class="badge badge-completed">Verified</span>
                            @else
                                <span class="badge badge-failed">Unverified</span>
                            @endif
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-at"></i></div>
                        <div>
                            <div class="srow__l">Username</div>
                            <div class="srow__v">{{ auth()->user()->username ?? 'Not set' }}</div>
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-calendar"></i></div>
                        <div>
                            <div class="srow__l">Member Since</div>
                            <div class="srow__v">{{ auth()->user()->created_at?->format('d F Y') }}</div>
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-time"></i></div>
                        <div>
                            <div class="srow__l">Last Updated</div>
                            <div class="srow__v">{{ auth()->user()->updated_at?->format('d M Y, H:i') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card__body">
                    <div class="sec-hdr">
                        <div class="sec-hdr__ico sec-hdr__ico--gold"><i class="icon ion-md-globe"></i></div>
                        <div>
                            <div class="sec-hdr__title">Regional Settings</div>
                            <div class="sec-hdr__sub">Location and currency preferences</div>
                        </div>
                    </div>

                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-globe"></i></div>
                        <div>
                            <div class="srow__l">Country</div>
                            <div class="srow__v">{{ auth()->user()->country ?? 'Not set' }}</div>
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-cash"></i></div>
                        <div>
                            <div class="srow__l">Currency</div>
                            <div class="srow__v">{{ auth()->user()->currency ?? 'Not set' }}</div>
                        </div>
                    </div>
                    <div class="srow">
                        <div class="srow__ico"><i class="icon ion-md-card"></i></div>
                        <div>
                            <div class="srow__l">Account Balance</div>
                            <div class="srow__v" style="color:var(--success);">
                                ${{ number_format((float) (auth()->user()->balance ?? 0), 2) }}</div>
                        </div>
                    </div>

                    {{-- Logout zone --}}
                    <div
                        style="margin-top:20px;padding:16px;background:var(--surface2);border-radius:12px;border:1.5px solid var(--border);">
                        <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;">Session</div>
                        <div style="font-size:12px;color:var(--muted);margin-bottom:12px;">Sign out of your account on this
                            device.</div>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="btn btn--danger btn--sm">
                                <i class="icon ion-md-power"></i> Log Out
                            </button>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>

    {{-- ─── TAB: Security ─── --}}
    <div class="tab-panel" id="tab-security">
        <div class="card">
            <div class="card__body">
                <div class="sec-hdr">
                    <div class="sec-hdr__ico sec-hdr__ico--green"><i class="icon ion-md-shield-checkmark"></i></div>
                    <div>
                        <div class="sec-hdr__title">Security Overview</div>
                        <div class="sec-hdr__sub">Account protection status</div>
                    </div>
                </div>

                {{-- Security status rows --}}
                <div class="srow">
                    <div class="srow__ico"
                        style="background:{{ auth()->user()->email_verified_at ? '#dcfce7' : '#fee2e2' }};">
                        <i class="icon ion-md-mail"
                            style="color:{{ auth()->user()->email_verified_at ? 'var(--success)' : 'var(--danger)' }};"></i>
                    </div>
                    <div>
                        <div class="srow__l">Email Verification</div>
                        <div class="srow__v">{{ auth()->user()->email }}</div>
                    </div>
                    <div class="srow__r">
                        @if (auth()->user()->email_verified_at)
                            <span class="badge badge-completed" style="font-size:12px;padding:5px 12px;">
                                <i class="icon ion-md-checkmark-circle" style="margin-right:4px;"></i>Verified
                            </span>
                        @else
                            <span class="badge badge-failed" style="font-size:12px;padding:5px 12px;">
                                <i class="icon ion-md-close-circle" style="margin-right:4px;"></i>Not Verified
                            </span>
                        @endif
                    </div>
                </div>

                <div class="srow">
                    <div class="srow__ico" style="background:#eef1ff;">
                        <i class="icon ion-md-lock" style="color:var(--primary);"></i>
                    </div>
                    <div>
                        <div class="srow__l">Password</div>
                        <div class="srow__v">••••••••••••</div>
                    </div>
                    <div class="srow__r">
                        <span class="badge badge-active" style="font-size:12px;padding:5px 12px;">Active</span>
                    </div>
                </div>

                <div class="srow">
                    <div class="srow__ico" style="background:#fef9c3;">
                        <i class="icon ion-md-time" style="color:var(--gold);"></i>
                    </div>
                    <div>
                        <div class="srow__l">Account Created</div>
                        <div class="srow__v">{{ auth()->user()->created_at?->format('d M Y, H:i') }}</div>
                    </div>
                </div>

                <div class="srow">
                    <div class="srow__ico" style="background:#f3e8ff;">
                        <i class="icon ion-md-refresh" style="color:var(--accent);"></i>
                    </div>
                    <div>
                        <div class="srow__l">Last Profile Update</div>
                        <div class="srow__v">{{ auth()->user()->updated_at?->format('d M Y, H:i') }}</div>
                    </div>
                </div>

            </div>
        </div>

        {{-- Security tips --}}
        <div class="pg-2">
            <div
                style="background:linear-gradient(135deg,#0f1535,#1a2060);border-radius:14px;padding:22px;color:#fff;position:relative;overflow:hidden;">
                <div
                    style="position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.04);top:-30px;right:-20px;">
                </div>
                <div style="position:relative;z-index:1;">
                    <div
                        style="width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:14px;">
                        <i class="icon ion-md-shield-checkmark" style="font-size:22px;color:#a5b4fc;"></i>
                    </div>
                    <div style="font-family:var(--font-brand);font-size:16px;font-weight:700;margin-bottom:6px;">Stay
                        Secure</div>
                    <div style="font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.6;">
                        Never share your password or account details. BelluchiBroker will never ask for your credentials via
                        email or phone.
                    </div>
                </div>
            </div>
            <div
                style="background:linear-gradient(135deg,#059669,#047857);border-radius:14px;padding:22px;color:#fff;position:relative;overflow:hidden;">
                <div
                    style="position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);top:-30px;right:-20px;">
                </div>
                <div style="position:relative;z-index:1;">
                    <div
                        style="width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;">
                        <i class="icon ion-md-checkmark-circle" style="font-size:22px;color:#a7f3d0;"></i>
                    </div>
                    <div style="font-family:var(--font-brand);font-size:16px;font-weight:700;margin-bottom:6px;">Verified
                        Account</div>
                    <div style="font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.6;">
                        @if (auth()->user()->email_verified_at)
                            Your email is verified. Your account is protected and in good standing.
                        @else
                            Please verify your email address to unlock full account features and security.
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── TAB: Wallet ─── --}}
    <div class="tab-panel" id="tab-wallet">

        <div class="ws-grid">
            <div class="ws-tile ws-tile--g">
                <div class="ws-tile__lbl">Available Balance</div>
                <div class="ws-tile__val" style="color:var(--success);">
                    ${{ number_format((float) $walletSummary['available_balance'], 2) }}</div>
                <div class="ws-tile__sub">Ready to use</div>
            </div>
            <div class="ws-tile ws-tile--y">
                <div class="ws-tile__lbl">Pending Total</div>
                <div class="ws-tile__val" style="color:var(--gold);">
                    ${{ number_format((float) $walletSummary['pending_total'], 2) }}</div>
                <div class="ws-tile__sub">In processing</div>
            </div>
            <div class="ws-tile ws-tile--b">
                <div class="ws-tile__lbl">Total Deposits</div>
                <div class="ws-tile__val">${{ number_format((float) $walletSummary['total_deposits'], 2) }}</div>
                <div class="ws-tile__sub">All-time inflows</div>
            </div>
            <div class="ws-tile ws-tile--r">
                <div class="ws-tile__lbl">Total Withdrawals</div>
                <div class="ws-tile__val">${{ number_format((float) $walletSummary['total_withdrawals'], 2) }}</div>
                <div class="ws-tile__sub">All-time outflows</div>
            </div>
            <div class="ws-tile ws-tile--g">
                <div class="ws-tile__lbl">Completed Tx</div>
                <div class="ws-tile__val" style="color:var(--success);">{{ $walletSummary['completed_transactions'] }}
                </div>
                <div class="ws-tile__sub">Settled transactions</div>
            </div>
            <div class="ws-tile ws-tile--y">
                <div class="ws-tile__lbl">Pending Tx</div>
                <div class="ws-tile__val" style="color:var(--gold);">{{ $walletSummary['pending_transactions'] }}</div>
                <div class="ws-tile__sub">Awaiting settlement</div>
            </div>
        </div>

        {{-- Wallet mini chart --}}
        <div class="card">
            <div class="card__head">
                <div>
                    <div class="card__title">Wallet Overview</div>
                    <div class="card__sub">Balance flow at a glance</div>
                </div>
            </div>
            <div class="card__body">
                <div id="walletOverviewChart"></div>
            </div>
        </div>

    </div>

    {{-- ─── TAB: Quick Actions ─── --}}
    <div class="tab-panel" id="tab-actions">
        <div class="card">
            <div class="card__head">
                <div>
                    <div class="card__title">Quick Actions</div>
                    <div class="card__sub">Jump to the most important sections</div>
                </div>
            </div>
            <div class="card__body">
                <div class="act-grid">

                    <a href="{{ route('dashboard.wallet.deposit') }}" class="act-btn act-btn--d">
                        <div class="act-btn__ico"><i class="icon ion-md-arrow-down"></i></div>
                        <span>Deposit Funds</span>
                    </a>

                    <a href="{{ route('dashboard.wallet.withdraw') }}" class="act-btn act-btn--w">
                        <div class="act-btn__ico"><i class="icon ion-md-arrow-up"></i></div>
                        <span>Withdraw Funds</span>
                    </a>

                    <a href="{{ route('dashboard.stocks') }}" class="act-btn act-btn--s">
                        <div class="act-btn__ico"><i class="icon ion-md-trending-up"></i></div>
                        <span>Trade Stocks</span>
                    </a>

                    <a href="{{ route('dashboard.markets') }}" class="act-btn act-btn--m">
                        <div class="act-btn__ico"><i class="icon ion-md-globe"></i></div>
                        <span>View Markets</span>
                    </a>

                    <a href="{{ route('dashboard.wallet') }}" class="act-btn act-btn--p">
                        <div class="act-btn__ico"><i class="icon ion-md-wallet"></i></div>
                        <span>My Wallet</span>
                    </a>

                    <a href="{{ route('dashboard.market-capital') }}" class="act-btn act-btn--s" style="">
                        <div class="act-btn__ico" style="background:#fef9c3;"><i class="icon ion-md-car"
                                style="color:var(--gold);"></i></div>
                        <span>Inventory</span>
                    </a>

                    <a href="{{ route('dashboard.overview') }}" class="act-btn">
                        <div class="act-btn__ico" style="background:var(--surface2);"><i class="icon ion-md-speedometer"
                                style="color:var(--muted);"></i></div>
                        <span>Dashboard</span>
                    </a>

                    <a href="{{ route('dashboard.profile') }}" class="act-btn">
                        <div class="act-btn__ico" style="background:var(--surface2);"><i class="icon ion-md-person"
                                style="color:var(--muted);"></i></div>
                        <span>My Profile</span>
                    </a>

                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        // ── Tab switcher ──
        document.querySelectorAll('.stab').forEach(function(btn) {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.stab').forEach(function(b) {
                    b.classList.remove('active');
                });
                document.querySelectorAll('.tab-panel').forEach(function(p) {
                    p.classList.remove('active');
                });
                btn.classList.add('active');
                document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
                if (btn.dataset.tab === 'wallet' && !window._walletChartRendered) {
                    renderWalletChart();
                    window._walletChartRendered = true;
                }
            });
        });

        // ── Wallet overview chart ──
        function renderWalletChart() {
            var el = document.getElementById('walletOverviewChart');
            if (!el) return;
            var deposits = parseFloat('{{ $walletSummary['total_deposits'] }}') || 0;
            var withdrawals = parseFloat('{{ $walletSummary['total_withdrawals'] }}') || 0;
            var pending = parseFloat('{{ $walletSummary['pending_total'] }}') || 0;
            var available = parseFloat('{{ $walletSummary['available_balance'] }}') || 0;

            new ApexCharts(el, {
                series: [{
                        name: 'Total Deposits',
                        data: [0, deposits * .25, deposits * .5, deposits * .7, deposits * .85, deposits]
                    },
                    {
                        name: 'Total Withdrawals',
                        data: [0, withdrawals * .2, withdrawals * .4, withdrawals * .6, withdrawals * .8,
                            withdrawals
                        ]
                    },
                ],
                chart: {
                    type: 'area',
                    height: 240,
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: true,
                        speed: 700
                    }
                },
                colors: ['#05c168', '#f5222d'],
                stroke: {
                    curve: 'smooth',
                    width: 2.5
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        opacityFrom: .2,
                        opacityTo: .0
                    }
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Now'],
                    labels: {
                        style: {
                            fontSize: '11px',
                            colors: '#8898aa'
                        }
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(v) {
                            return '$' + v.toFixed(0);
                        },
                        style: {
                            fontSize: '11px',
                            colors: '#8898aa'
                        }
                    }
                },
                grid: {
                    borderColor: '#e4e8f0',
                    strokeDashArray: 4
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    fontSize: '12px'
                },
                tooltip: {
                    shared: true,
                    intersect: false
                }
            }).render();
        }
    </script>
@endpush