@extends('layouts.app')

@section('title', 'Dashboard — Swagvio')

@section('styles')
<style>
    /* ===== DASHBOARD PAGE ===== */
    .dash-page {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 16px 48px;
    }

    /* AGE WARNING */
    .age-warning {
        background: #fff8e1;
        border: 1px solid #ffe082;
        border-radius: 4px;
        padding: 12px 16px;
        margin-bottom: 20px;
        display: flex; align-items: flex-start; gap: 10px;
        font-size: 13px; color: #7b5c00;
    }
    .age-warning-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .age-warning strong { font-weight: 700; display: block; margin-bottom: 2px; font-size: 13px; }

    /* WELCOME HEADER */
    .dash-welcome { margin-bottom: 20px; }
    .dash-welcome h2 { font-size: 14px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
    .dash-welcome .email { font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
    .dash-welcome .customer-code-label { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
    .dash-welcome .customer-code {
        font-size: 13px; font-weight: 700; color: var(--pink);
        letter-spacing: .5px;
    }

    /* MAIN DASH GRID */
    .dash-main {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 16px;
    }
    .dash-left { display: flex; flex-direction: column; gap: 12px; }
    .dash-right { display: flex; flex-direction: column; gap: 12px; }

    /* SMALL CARDS GRID (Ads, Wallet, Coupons, Settings) */
    .dash-cards-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* DASHBOARD CARD */
    .dash-card {
        background: white;
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        transition: box-shadow .15s;
    }
    .dash-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); }

    .dash-card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }
    .dash-card-title {
        font-size: 13px; font-weight: 700; color: var(--text);
        display: flex; align-items: center; gap: 8px;
    }
    .dash-card-title .title-icon { font-size: 15px; color: var(--text-3); }
    .dash-card-chevron { color: var(--text-4); font-size: 16px; }

    .dash-card-body { padding: 12px 14px; }

    /* ADS CARD */
    .ads-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .ads-row:last-child { margin-bottom: 0; }
    .ads-label { font-size: 13px; color: var(--text-2); }
    .ads-count { font-size: 13px; font-weight: 700; color: var(--text); }

    /* WALLET CARD */
    .wallet-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .wallet-label { font-size: 13px; color: var(--text-2); }
    .wallet-count { font-size: 13px; font-weight: 700; color: var(--text); }
    .wallet-buy-btn {
        width: 100%; margin-top: 10px;
        background: var(--pink); color: white;
        border: none; border-radius: 4px; padding: 9px;
        font-size: 13px; font-weight: 700; cursor: pointer;
        font-family: 'Open Sans', sans-serif; transition: background .2s;
        letter-spacing: .3px;
    }
    .wallet-buy-btn:hover { background: var(--pink-dark); }

    /* COUPONS / SETTINGS CARD */
    .dash-card-desc { font-size: 13px; color: var(--text-3); }

    /* NEWSLETTER CARD */
    .newsletter-card {
        background: white; border: 1px solid var(--border);
        border-radius: 6px; padding: 0;
    }
    .newsletter-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border-bottom: 1px solid var(--border);
    }
    .newsletter-title {
        font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px;
    }
    .newsletter-content { padding: 12px 14px; }
    .newsletter-text { font-size: 13px; color: var(--text-2); margin-bottom: 12px; line-height: 1.5; }
    .newsletter-text strong { color: var(--pink); }
    .newsletter-legal { font-size: 11px; color: var(--text-4); line-height: 1.6; }
    .newsletter-legal a { color: var(--pink); }

    /* SECURITY TIPS CARD */
    .security-tips-card {
        background: linear-gradient(135deg, #e91e8c 0%, #9c27b0 100%);
        border-radius: 6px; padding: 16px;
        position: relative; overflow: hidden;
    }
    .security-tips-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 2px 8px; border-radius: 3px;
        font-size: 10px; font-weight: 700; text-transform: uppercase;
        background: rgba(255,255,255,.25); color: white;
        margin-bottom: 8px; letter-spacing: .5px;
    }
    .security-tips-card h4 { color: white; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
    .security-tips-card p { color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
    .security-tips-card .tips-link {
        color: white; font-size: 13px; font-weight: 700;
        text-decoration: underline;
    }
    .security-tips-card .tips-link:hover { text-decoration: none; }

    /* RIGHT COLUMN */
    /* VERIFY AGE CARD */
    .verify-card {
        background: white; border: 1px solid var(--border);
        border-radius: 6px; overflow: hidden;
    }
    .verify-card-header {
        padding: 12px 16px; border-bottom: 1px solid var(--border);
        display: flex; align-items: center; justify-content: space-between;
    }
    .verify-card-title { font-size: 14px; font-weight: 700; }
    .verify-card-links { display: flex; gap: 12px; }
    .verify-card-links a { font-size: 12px; color: var(--pink); display: flex; align-items: center; gap: 4px; }
    .verify-card-links a:hover { text-decoration: underline; }

    .verify-card-body { padding: 20px 16px; text-align: center; }
    .verify-icon-box {
        width: 60px; height: 60px;
        border: 2px solid var(--border); border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 16px; font-size: 28px;
    }
    .verify-text { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 10px; }
    .verify-text strong { color: var(--text); }
    .verify-note { font-size: 12px; color: var(--text-3); line-height: 1.5; margin-bottom: 12px; }
    .verify-note a { color: var(--pink); }
    .verify-info { font-size: 12px; color: var(--blue); display: flex; align-items: center; justify-content: center; gap: 4px; }
    .verify-start-btn {
        width: 100%; background: var(--blue);
        color: white; border: none; border-radius: 4px;
        padding: 11px; font-size: 13px; font-weight: 700;
        cursor: pointer; font-family: 'Open Sans', sans-serif;
        transition: background .2s; letter-spacing: .5px;
        text-transform: uppercase; margin-top: 14px;
    }
    .verify-start-btn:hover { background: var(--blue-light); }

    /* STAR PROMO CARD */
    .star-promo-card {
        background: white; border: 1px solid var(--border);
        border-radius: 6px; padding: 14px 16px;
        position: relative;
    }
    .star-promo-badge {
        position: absolute; top: 12px; right: 12px;
        background: var(--pink); color: white;
        font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
    }
    .star-promo-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
    .star-promo-icon { font-size: 22px; }
    .star-promo-header h4 { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; }
    .star-promo-text { font-size: 12px; color: var(--text-3); line-height: 1.55; }
    .star-promo-text a { color: var(--pink); }

    /* HELP CARD */
    .help-card {
        background: white; border: 1px solid var(--border);
        border-radius: 6px; padding: 16px;
    }
    .help-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .help-icon { font-size: 22px; }
    .help-title { font-size: 14px; font-weight: 700; }
    .help-subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
    .help-channels { display: flex; gap: 16px; }
    .help-channel {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 600; color: var(--text-2);
    }
    .help-channel.whatsapp { color: #25d366; }
    .help-channel.telegram { color: #0088cc; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .dash-main { grid-template-columns: 1fr; }
        .dash-right { order: -1; }
        .dash-cards-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
        .dash-cards-grid { grid-template-columns: 1fr; }
    }
</style>
@endsection

@section('content')
<div class="dash-page">

    {{-- AGE WARNING --}}
    <div class="age-warning">
        <span class="age-warning-icon"><i class="fi fi-rr-triangle-warning" style="color:#e65100;"></i></span>
        <div>
            <strong>ATTENTION: Age verification!</strong>
            To unlock the features of your private area, you must first verify your age.
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success" style="margin-bottom:16px;"><i class="fi fi-rr-check-circle" style="color:#43a047;"></i> {{ session('success') }}</div>
    @endif

    {{-- WELCOME --}}
    <div class="dash-welcome">
        <h2>WELCOME</h2>
        <div class="email">{{ $user->email }}</div>
        <div class="customer-code-label">Customer code:</div>
        <div class="customer-code">{{ strtoupper(substr(md5($user->email), 0, 8)) }}</div>
    </div>

    {{-- MAIN DASHBOARD GRID --}}
    <div class="dash-main">

        {{-- LEFT COLUMN --}}
        <div class="dash-left">

            {{-- ADS & WALLET ROW --}}
            <div class="dash-cards-grid">
                {{-- ADS CARD --}}
                <div class="dash-card">
                    <div class="dash-card-header">
                        <div class="dash-card-title">
                            <span class="title-icon"><i class="fi fi-rr-ad"></i></span> Ads
                        </div>
                        <span class="dash-card-chevron">›</span>
                    </div>
                    <div class="dash-card-body">
                        <div class="ads-row">
                            <span class="ads-label">Active</span>
                            <span class="ads-count">{{ $stats['active_ads'] }}</span>
                        </div>
                        <div class="ads-row">
                            <span class="ads-label">Not published</span>
                            <span class="ads-count">{{ $stats['pending_ads'] }}</span>
                        </div>
                    </div>
                </div>

                {{-- WALLET CARD --}}
                <div class="dash-card">
                    <div class="dash-card-header">
                        <div class="dash-card-title">
                            <span class="title-icon"><i class="fi fi-rr-wallet"></i></span> Wallet
                        </div>
                        <span class="dash-card-chevron">›</span>
                    </div>
                    <div class="dash-card-body">
                        <div class="wallet-row">
                            <span class="wallet-label">Currents</span>
                            <span class="wallet-count">{{ number_format($stats['wallet_balance'], 0) }}</span>
                        </div>
                        <div class="wallet-row">
                            <span class="wallet-label">Used</span>
                            <span class="wallet-count">0</span>
                        </div>
                        <button class="wallet-buy-btn" id="btn-buy-credits">BUY CREDITS</button>
                    </div>
                </div>
            </div>

            {{-- COUPONS & SETTINGS ROW --}}
            <div class="dash-cards-grid">
                {{-- COUPONS --}}
                <div class="dash-card">
                    <div class="dash-card-header">
                        <div class="dash-card-title">
                            <span class="title-icon"><i class="fi fi-rr-ticket"></i></span> Coupons
                        </div>
                        <span class="dash-card-chevron">›</span>
                    </div>
                    <div class="dash-card-body">
                        <div class="dash-card-desc">Manage your coupons</div>
                    </div>
                </div>

                {{-- SETTINGS --}}
                <div class="dash-card">
                    <div class="dash-card-header">
                        <div class="dash-card-title">
                            <span class="title-icon"><i class="fi fi-rr-settings"></i></span> Settings
                        </div>
                        <span class="dash-card-chevron">›</span>
                    </div>
                    <div class="dash-card-body">
                        <div class="dash-card-desc">Manage your personal info.</div>
                    </div>
                </div>
            </div>

            {{-- NEWSLETTER CARD --}}
            <div class="newsletter-card">
                <div class="newsletter-header">
                    <span class="newsletter-title">
                        <span style="font-size:16px;"><i class="fi fi-rr-envelope"></i></span> Newsletter
                    </span>
                    <div class="toggle-wrap">
                        <span class="toggle-state" id="nl-state">OFF</span>
                        <label class="toggle">
                            <input type="checkbox" id="nl-toggle" onchange="toggleNewsletter(this)">
                            <span class="toggle-track"></span>
                        </label>
                    </div>
                </div>
                <div class="newsletter-content">
                    <div class="newsletter-text">
                        Join <strong>Swagvio</strong> to get exclusive news, promotions and more!!
                    </div>
                    <div style="font-size:12px; color:var(--text-3); margin-bottom:8px; font-style:italic;">Marketing Communications</div>
                    <div class="newsletter-legal">
                        I authorize the proceeding by the Company of my Contact details for marketing and
                        advertising purposes (<a href="#">Privacy Policy</a>). Any withdrawal will not affect any
                        processing carried out before such withdrawal.
                    </div>
                </div>
            </div>

            {{-- SECURITY TIPS --}}
            <div class="security-tips-card">
                <div class="security-tips-badge"><i class="fi fi-rr-shield-check"></i> SECURITY TIPS</div>
                <h4>Security tips</h4>
                <p>Block and report impostors. You can notify us through our official channels or report directly to the authorities.</p>
                <a href="#" class="tips-link">Visit our Help Center to learn more.</a>
            </div>

        </div>

        {{-- RIGHT COLUMN --}}
        <div class="dash-right">

            {{-- VERIFY AGE CARD --}}
            <div class="verify-card">
                <div class="verify-card-header">
                    <span class="verify-card-title"><i class="fi fi-rr-id-card"></i> Verify your age</span>
                    <div class="verify-card-links">
                        <a href="#"><i class="fi fi-rr-question-circle"></i> How it works?</a>
                        <a href="#"><i class="fi fi-rr-question-circle"></i> Have any questions?</a>
                    </div>
                </div>
                <div class="verify-card-body">
                    <div class="verify-icon-box"><i class="fi fi-rr-id-card" style="font-size:28px; color:var(--text-3);"></i></div>
                    <p class="verify-text">
                        As Swagvio we need to be sure that everyone who publishes is of age.
                    </p>
                    <p class="verify-text" style="font-style:italic;">
                        <strong>Verify your age now!</strong>
                    </p>
                    <p class="verify-note">
                        If you need any help in the process check out our <a href="#">tutorial</a> or write to
                        <a href="mailto:support@swagvio.co.in">support@swagvio.co.in</a>
                        We'll get back to you soon!
                    </p>
                    <div class="verify-info"><i class="fi fi-rr-info"></i> Info</div>
                </div>
                <div style="padding: 0 16px 16px;">
                    <button class="verify-start-btn" id="btn-verify-age">START NOW</button>
                </div>
            </div>

            {{-- STAR PROMO CARD --}}
            <div class="star-promo-card">
                <div class="star-promo-badge">NEW</div>
                <div class="star-promo-header">
                    <span class="star-promo-icon"><i class="fi fi-rr-star"></i></span>
                    <h4>Stand out with the new Star!</h4>
                </div>
                <p class="star-promo-text">
                    Catch attention like never before. Promote your ad in a premium format that always puts you front and center.
                    <a href="#">Learn more</a>
                </p>
            </div>

            {{-- NEED HELP CARD --}}
            <div class="help-card">
                <div class="help-card-header">
                    <span class="help-icon"><i class="fi fi-rr-comment"></i></span>
                    <span class="help-title">Need help?</span>
                </div>
                <p class="help-subtitle">Contact us through one of our channels from <strong>Monday to Friday</strong> from 2pm to 4pm.</p>
                <div class="help-channels">
                    <div class="help-channel whatsapp">
                        <span><i class="fi fi-brands-whatsapp"></i></span> WhatsApp
                    </div>
                    <div class="help-channel telegram">
                        <span><i class="fi fi-brands-telegram"></i></span> Telegram
                    </div>
                </div>
            </div>

            {{-- QUICK LINKS --}}
            <div class="dash-card">
                <div class="dash-card-body">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" style="display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text-3); font-family:'Open Sans',sans-serif; padding:2px 0; transition:color .2s;" onmouseover="this.style.color='var(--pink)'" onmouseout="this.style.color='var(--text-3)'">
                            <i class="fi fi-rr-sign-out"></i> Sign Out
                        </button>
                    </form>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
    function toggleNewsletter(el) {
        document.getElementById('nl-state').textContent = el.checked ? 'ON' : 'OFF';
        showToast(el.checked ? 'Newsletter subscribed!' : 'Newsletter unsubscribed');
    }
</script>
@endsection