{{--
    resources/views/auth/login.blade.php
    Split-screen login page in the TradTrik theme.
    Extends layouts.app, so your existing header (top) and footer (bottom)
    show around this page automatically — nothing extra needed for that.

    Left  : headline + strategy tabs + a live-looking payoff chart card
    Right : sign-in card (Google + broker options)

    Route example (routes/web.php):
        Route::get('/login', function () {
            return view('auth.login');
        })->name('login');
--}}

@extends('layouts.app')

@section('title', 'Sign In - TradTrik')

@section('content')

<section class="tt-login" id="ttLogin">
    <div class="tt-login-glow" id="ttLoginGlow"></div>
    <canvas class="tt-login-particles" id="ttLoginParticles"></canvas>

    <div class="container tt-login-grid">

        {{-- ============ LEFT: pitch + live payoff preview ============ --}}
        <div class="tt-login-left">
            <span class="tt-badge tt-reveal" style="--d:0s">
                <span class="tt-badge-dot"></span>
                Built for retail options traders across India
            </span>

            <h1 class="tt-login-title tt-reveal" style="--d:.08s">
                Real-time options analytics,<br>
                <span class="tt-accent">before you place the trade.</span>
            </h1>

            <p class="tt-login-sub tt-reveal" style="--d:.16s">
                Built by traders who read the chain every single day.
            </p>

            <div class="tt-strategy-tabs tt-reveal" style="--d:.24s" id="ttStrategyTabs">
                <button type="button" class="tt-tab active" data-strategy="butterfly">BUTTERFLY 1:2:1</button>
                <button type="button" class="tt-tab" data-strategy="ratio">RATIO 1:3:2</button>
                <button type="button" class="tt-tab" data-strategy="condor">IRON CONDOR</button>
                <button type="button" class="tt-tab" data-strategy="straddle">STRADDLE</button>
            </div>

            <div class="tt-payoff-card tt-reveal" style="--d:.32s" id="ttPayoffCard">
                <div class="tt-payoff-head">
                    <h3 id="ttPayoffTitle">Butterfly 1:2:1</h3>
                    <span id="ttPayoffSub">PAYOFF AT EXPIRY &middot; NIFTY 28 AUG</span>
                </div>

                <div class="tt-payoff-chart">
                    <svg viewBox="0 0 640 220" preserveAspectRatio="none" width="100%" height="220">
                        <defs>
                            <linearGradient id="ttPayoffFill" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stop-color="#ff7a00" stop-opacity="0.35"/>
                                <stop offset="100%" stop-color="#ff7a00" stop-opacity="0"/>
                            </linearGradient>
                        </defs>
                        <line x1="0" y1="150" x2="640" y2="150" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
                        <line id="ttSpotLine" x1="230" y1="20" x2="230" y2="200" stroke="rgba(255,255,255,0.35)" stroke-width="1.5" stroke-dasharray="4 4"/>
                        <polygon id="ttPayoffFillShape" points="" fill="url(#ttPayoffFill)"></polygon>
                        <polyline id="ttPayoffLine" points="" fill="none" stroke="#ff9d40" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle id="ttSpotDot" cx="230" cy="85" r="6" fill="#ffffff"/>
                    </svg>
                </div>

                <div class="tt-payoff-stats">
                    <div class="tt-stat-block">
                        <span class="tt-stat-label">MAX PROFIT</span>
                        <span class="tt-stat-value tt-up" id="ttStatProfit">+₹4,180</span>
                    </div>
                    <div class="tt-stat-block">
                        <span class="tt-stat-label">MAX RISK</span>
                        <span class="tt-stat-value tt-down" id="ttStatRisk">-₹820</span>
                    </div>
                    <div class="tt-stat-block">
                        <span class="tt-stat-label">BREAKEVENS</span>
                        <span class="tt-stat-value" id="ttStatBreakeven">24,762 / 24,938</span>
                    </div>
                    <div class="tt-stat-block">
                        <span class="tt-stat-label">IV PERCENTILE</span>
                        <span class="tt-stat-value" id="ttStatIv">38</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============ RIGHT: sign-in card ============ --}}
        <div class="tt-login-right tt-reveal" style="--d:.2s">
            <div class="tt-login-card">
                <span class="tt-eyebrow">SIGN IN</span>
                <h2>Welcome back to TradTrik</h2>
                <p class="tt-login-card-sub">Sign in with Google or your broker to continue.</p>

                @if ($errors->any())
                    <div class="tt-login-error">
                        {{ $errors->first() }}
                    </div>
                @endif

                <a href="{{ url('/auth/google') }}" class="tt-google-btn">
                    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.9c1.7-1.57 2.7-3.88 2.7-6.62z"/>
                        <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.26c-.8.54-1.84.86-3.06.86-2.35 0-4.34-1.59-5.05-3.72H.95v2.33A9 9 0 0 0 9 18z"/>
                        <path fill="#FBBC05" d="M3.95 10.7A5.4 5.4 0 0 1 3.67 9c0-.59.1-1.17.28-1.7V4.97H.95A9 9 0 0 0 0 9c0 1.45.35 2.83.95 4.03l3-2.33z"/>
                        <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .95 4.97l3 2.33C4.66 5.17 6.65 3.58 9 3.58z"/>
                    </svg>
                    Continue with Google
                </a>

                <div class="tt-divider"><span>OR USE YOUR BROKER</span></div>

                <div class="tt-broker-list">
                    <a href="{{ url('/auth/zerodha') }}" class="tt-broker">
                        <span>Zerodha</span>
                        <span class="tt-broker-arrow">&rarr;</span>
                    </a>
                    <a href="{{ url('/auth/upstox') }}" class="tt-broker">
                        <span>Upstox</span>
                        <span class="tt-broker-arrow">&rarr;</span>
                    </a>
                    <a href="{{ url('/auth/shoonya') }}" class="tt-broker tt-broker-highlight">
                        <span>Shoonya</span>
                        <span class="tt-broker-tag">LOW LATENCY</span>
                        <span class="tt-broker-arrow">&rarr;</span>
                    </a>
                </div>

                <div class="tt-signup-note">
                    Don't have a Shoonya account?
                    <a href="{{ url('/signup/shoonya') }}">Sign up here</a> for low latency orders.
                </div>

                <p class="tt-terms">
                    By signing in you agree to the <a href="{{ url('/terms') }}">Terms</a> and
                    <a href="{{ url('/privacy') }}">Privacy Policy</a>. TradTrik is an analytics
                    platform and does not provide investment advice.
                </p>
            </div>
        </div>

    </div>
</section>

@endsection

@push('styles')
<style>
    /* ================= LOGIN PAGE ================= */
    .tt-login {
        position: relative;
        overflow: hidden;
        background: #0d1b2e;
        padding: 56px 0;
        min-height: calc(100vh - 260px); /* leaves room for header + footer */
    }

    .tt-login-particles {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.45;
    }

    .tt-login-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(255, 122, 0, 0.16) 0%, rgba(255, 122, 0, 0.05) 45%, transparent 70%);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 0;
    }

    .tt-login:hover .tt-login-glow { opacity: 1; }

    .tt-login-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 56px;
        align-items: start;
    }

    .tt-reveal {
        opacity: 0;
        transform: translateY(14px);
        animation: ttLoginReveal 0.6s cubic-bezier(.22,.61,.36,1) forwards;
        animation-delay: var(--d, 0s);
    }

    @keyframes ttLoginReveal {
        to { opacity: 1; transform: translateY(0); }
    }

    /* ---- left column ---- */
    .tt-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 122, 0, 0.1);
        border: 1px solid rgba(255, 122, 0, 0.3);
        color: #ff9d40;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 22px;
    }

    .tt-badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ff7a00;
        display: inline-block;
    }

    .tt-login-title {
        font-size: 38px;
        font-weight: 800;
        line-height: 1.25;
        color: #ffffff;
        margin: 0 0 14px;
    }

    .tt-login-title .tt-accent { color: #ff9d40; }

    .tt-login-sub {
        font-size: 15px;
        color: #9aa5b8;
        margin: 0 0 26px;
    }

    .tt-strategy-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 18px;
    }

    .tt-tab {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #9aa5b8;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.4px;
        padding: 8px 16px;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tt-tab:hover { border-color: rgba(255, 122, 0, 0.4); color: #e8ecf3; }

    .tt-tab.active {
        background: rgba(255, 122, 0, 0.12);
        border-color: #ff7a00;
        color: #ff9d40;
    }

    .tt-payoff-card {
        background: #101f38;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 16px;
        padding: 22px 24px;
    }

    .tt-payoff-head { margin-bottom: 14px; }

    .tt-payoff-head h3 {
        font-size: 17px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 4px;
    }

    .tt-payoff-head span {
        font-size: 11px;
        letter-spacing: 0.5px;
        color: #6b7690;
    }

    .tt-payoff-chart { margin-bottom: 16px; }
    .tt-payoff-chart svg { display: block; transition: opacity 0.15s ease; }

    .tt-payoff-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 16px;
    }

    .tt-stat-block { display: flex; flex-direction: column; gap: 4px; }
    .tt-stat-label { font-size: 10px; letter-spacing: 0.4px; color: #6b7690; }
    .tt-stat-value { font-size: 15px; font-weight: 700; color: #e8ecf3; }
    .tt-stat-value.tt-up { color: #34d17a; }
    .tt-stat-value.tt-down { color: #ff6b6b; }

    /* ---- right column: sign-in card ---- */
    .tt-login-card {
        background: #101f38;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        padding: 32px 30px;
    }

    .tt-eyebrow {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #ff9d40;
        margin-bottom: 10px;
    }

    .tt-login-card h2 {
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 8px;
    }

    .tt-login-card-sub {
        font-size: 13.5px;
        color: #9aa5b8;
        margin: 0 0 22px;
    }

    .tt-login-error {
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        color: #ff9d9d;
        font-size: 13px;
        padding: 10px 14px;
        border-radius: 10px;
        margin-bottom: 18px;
    }

    .tt-google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: #ffffff;
        color: #1f2430;
        font-weight: 600;
        font-size: 14.5px;
        padding: 13px 20px;
        border-radius: 12px;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .tt-google-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        color: #1f2430;
    }

    .tt-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 22px 0;
        font-size: 10.5px;
        letter-spacing: 0.6px;
        color: #6b7690;
    }

    .tt-divider::before,
    .tt-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
    }

    .tt-broker-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .tt-broker {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #0d1b2e;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        padding: 14px 16px;
        text-decoration: none;
        color: #e8ecf3;
        font-weight: 600;
        font-size: 14.5px;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }

    .tt-broker:hover {
        border-color: rgba(255, 122, 0, 0.4);
        transform: translateX(2px);
        color: #e8ecf3;
    }

    .tt-broker-highlight { border-color: rgba(255, 122, 0, 0.35); }

    .tt-broker-tag {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        color: #ff9d40;
        background: rgba(255, 122, 0, 0.12);
        padding: 3px 8px;
        border-radius: 20px;
    }

    .tt-broker-arrow { color: #6b7690; }
    .tt-broker:not(.tt-broker-highlight) .tt-broker-arrow { margin-left: auto; }

    .tt-signup-note {
        background: #0d1b2e;
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 13px;
        color: #9aa5b8;
        margin-bottom: 18px;
    }

    .tt-signup-note a { font-weight: 600; }

    .tt-terms {
        font-size: 11.5px;
        line-height: 1.6;
        color: #6b7690;
        margin: 0;
    }

    @media (max-width: 992px) {
        .tt-login-grid { grid-template-columns: 1fr; gap: 40px; }
        .tt-login-title { font-size: 30px; }
        .tt-payoff-stats { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
    }

    @media (max-width: 576px) {
        .tt-login { padding: 36px 0; }
        .tt-strategy-tabs { gap: 8px; }
        .tt-tab { padding: 7px 12px; font-size: 10.5px; }
        .tt-payoff-card { padding: 18px; }
    }
</style>
@endpush

@push('scripts')
<script>
(function () {
    /* mouse-follow ambient glow, consistent with rest of site */
    const page = document.getElementById('ttLogin');
    const glow = document.getElementById('ttLoginGlow');
    if (page && glow) {
        page.addEventListener('mousemove', function (e) {
            const rect = page.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            glow.style.transform = 'translate(' + (x - 230) + 'px, ' + (y - 230) + 'px)';
        });
    }

    /* lightweight ambient particle field, same as homepage hero */
    const canvas = document.getElementById('ttLoginParticles');
    if (canvas && page) {
        const ctx = canvas.getContext('2d');
        let w, h, particles;

        function resize() {
            w = canvas.width = page.offsetWidth;
            h = canvas.height = page.offsetHeight;
            const count = Math.floor((w * h) / 22000);
            particles = Array.from({ length: count }, function () {
                return {
                    x: Math.random() * w,
                    y: Math.random() * h,
                    r: Math.random() * 1.3 + 0.4,
                    vy: Math.random() * 0.2 + 0.05
                };
            });
        }

        function draw() {
            ctx.clearRect(0, 0, w, h);
            ctx.fillStyle = 'rgba(255, 157, 64, 0.5)';
            particles.forEach(function (p) {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
                ctx.fill();
                p.y -= p.vy;
                if (p.y < 0) p.y = h;
            });
            requestAnimationFrame(draw);
        }

        resize();
        window.addEventListener('resize', resize);
        draw();
    }

    /* strategy tabs — swap the payoff chart + stats, no page reload */
    const datasets = {
        butterfly: {
            title: 'Butterfly 1:2:1',
            sub: 'PAYOFF AT EXPIRY &middot; NIFTY 28 AUG',
            line: '0,168 90,182 190,150 300,40 410,150 510,182 640,168',
            fill: '0,168 90,182 190,150 300,40 410,150 510,182 640,168 640,220 0,220',
            spotX: 300,
            spotY: 40,
            profit: '+₹4,180',
            risk: '-₹820',
            breakeven: '24,762 / 24,938',
            iv: '38'
        },
        ratio: {
            title: 'Ratio Spread 1:3:2',
            sub: 'PAYOFF AT EXPIRY &middot; BANKNIFTY 28 AUG',
            line: '0,178 120,186 230,150 330,55 430,120 520,196 640,206',
            fill: '0,178 120,186 230,150 330,55 430,120 520,196 640,206 640,220 0,220',
            spotX: 330,
            spotY: 55,
            profit: '+₹2,940',
            risk: 'Unlimited above 51,200',
            breakeven: '50,180 / 51,050',
            iv: '46'
        },
        condor: {
            title: 'Iron Condor',
            sub: 'PAYOFF AT EXPIRY &middot; SENSEX 28 AUG',
            line: '0,150 140,150 230,70 400,70 480,150 640,150',
            fill: '0,150 140,150 230,70 400,70 480,150 640,150 640,220 0,220',
            spotX: 310,
            spotY: 70,
            profit: '+₹1,650',
            risk: '-₹3,350',
            breakeven: '80,600 / 82,400',
            iv: '29'
        },
        straddle: {
            title: 'Long Straddle',
            sub: 'PAYOFF AT EXPIRY &middot; NIFTY 28 AUG',
            line: '0,40 220,180 320,205 420,180 640,40',
            fill: '0,40 220,180 320,205 420,180 640,40 640,220 0,220',
            spotX: 320,
            spotY: 205,
            profit: 'Unlimited',
            risk: '-₹1,960',
            breakeven: '24,610 / 25,090',
            iv: '61'
        }
    };

    const tabs = document.querySelectorAll('.tt-tab');
    const line = document.getElementById('ttPayoffLine');
    const fillShape = document.getElementById('ttPayoffFillShape');
    const spotLine = document.getElementById('ttSpotLine');
    const spotDot = document.getElementById('ttSpotDot');
    const chartSvg = document.querySelector('.tt-payoff-chart svg');
    const title = document.getElementById('ttPayoffTitle');
    const sub = document.getElementById('ttPayoffSub');
    const statProfit = document.getElementById('ttStatProfit');
    const statRisk = document.getElementById('ttStatRisk');
    const statBreakeven = document.getElementById('ttStatBreakeven');
    const statIv = document.getElementById('ttStatIv');

    function applyDataset(key) {
        const d = datasets[key];
        if (!d || !line) return;

        chartSvg.style.opacity = 0;

        setTimeout(function () {
            line.setAttribute('points', d.line);
            fillShape.setAttribute('points', d.fill);
            spotLine.setAttribute('x1', d.spotX);
            spotLine.setAttribute('x2', d.spotX);
            spotDot.setAttribute('cx', d.spotX);
            spotDot.setAttribute('cy', d.spotY);
            title.textContent = d.title;
            sub.innerHTML = d.sub;
            statProfit.textContent = d.profit;
            statRisk.textContent = d.risk;
            statBreakeven.textContent = d.breakeven;
            statIv.textContent = d.iv;
            chartSvg.style.opacity = 1;
        }, 120);
    }

    tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
            tabs.forEach(function (t) { t.classList.remove('active'); });
            tab.classList.add('active');
            applyDataset(tab.dataset.strategy);
        });
    });

    // draw the initial (butterfly) chart on load
    applyDataset('butterfly');
})();
</script>
@endpush