<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login — WhatsApp Cloud API</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            display: flex;
            background: #0a0a0a;
        }

        /* ═══════════ LEFT PANEL ═══════════ */
        .left {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 5rem 4rem;
            overflow: hidden;
            background: #0a0a0a;
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.25;
            animation: drift 16s ease-in-out infinite alternate;
            pointer-events: none;
        }
        .b1 { width: 550px; height: 550px; background: #25d366; top: -160px; left: -140px; animation-delay: 0s; }
        .b2 { width: 380px; height: 380px; background: #075e54; bottom: -100px; right: -40px; animation-delay: 5s; }
        .b3 { width: 260px; height: 260px; background: #128c7e; top: 40%; left: 40%; animation-delay: 10s; }

        @keyframes drift {
            0%   { transform: translate(0, 0) scale(1); }
            100% { transform: translate(45px, 55px) scale(1.15); }
        }

        .left-inner { position: relative; z-index: 1; max-width: 480px; }

        .brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 4rem;
        }
        .brand svg  { width: 42px; height: 42px; filter: drop-shadow(0 0 16px rgba(37,211,102,.4)); }
        .brand span { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: 0.3px; }

        .headline {
            font-size: 3.2rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.1;
            letter-spacing: -0.8px;
            margin-bottom: 1.25rem;
        }
        .headline em { font-style: normal; color: #25d366; }

        .tagline {
            font-size: 1.05rem;
            color: rgba(255,255,255,0.4);
            line-height: 1.7;
            margin-bottom: 3.5rem;
        }

        .perks { display: flex; flex-direction: column; gap: 1rem; }
        .perk  { display: flex; align-items: center; gap: 0.9rem; }

        .perk-dot {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: rgba(37,211,102,0.08);
            border: 1px solid rgba(37,211,102,0.2);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: background 0.3s;
        }
        .perk-dot svg { width: 15px; height: 15px; color: #25d366; }
        .perk span    { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
        .perk > div:last-child { display: flex; flex-direction: column; }

        /* ═══════════ RIGHT PANEL ═══════════ */
        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 3rem 2rem;
            background: #f5f6f8;
            position: relative;
        }

        .right::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 60% 0%, rgba(37,211,102,0.06) 0%, transparent 60%);
            pointer-events: none;
        }

        .form-wrap {
            width: 100%;
            max-width: 400px;
            position: relative;
            z-index: 1;
        }

        .form-wrap h2 {
            font-size: 2rem;
            font-weight: 800;
            color: #0f0f0f;
            letter-spacing: -0.5px;
            margin-bottom: 0.4rem;
        }

        .form-wrap .sub {
            font-size: 0.92rem;
            color: #9ca3af;
            margin-bottom: 2.25rem;
        }

        .form-group { margin-bottom: 1.1rem; }

        label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.45rem;
            letter-spacing: 0.2px;
        }

        .field {
            position: relative;
            display: flex;
            align-items: center;
        }

        .field-icon {
            position: absolute;
            left: 1rem;
            color: #9ca3af;
            pointer-events: none;
            display: flex;
        }

        .field-btn {
            position: absolute;
            right: 1rem;
            color: #9ca3af;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
            transition: color 0.2s;
        }
        .field-btn:hover { color: #6b7280; }

        input[type="email"],
        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 0.82rem 1rem 0.82rem 2.75rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 12px;
            font-size: 0.95rem;
            color: #111;
            background: #fff;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        input:focus {
            border-color: #25d366;
            box-shadow: 0 0 0 3px rgba(37,211,102,0.12);
        }

        input.is-err {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
        }

        .err-msg { margin-top: 0.35rem; font-size: 0.78rem; color: #ef4444; }

        .btn {
            width: 100%;
            padding: 0.9rem;
            background: #0f0f0f;
            color: #fff;
            font-size: 0.97rem;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            margin-top: 0.75rem;
            transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.18);
        }
        .btn:hover  { background: #1a1a1a; box-shadow: 0 6px 20px rgba(0,0,0,0.24); }
        .btn:active { transform: scale(0.99); }

        .divider {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 1.5rem 0;
            color: #d1d5db;
            font-size: 0.82rem;
        }
        .divider::before,
        .divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }

        .alt-link {
            text-align: center;
            font-size: 0.875rem;
            color: #6b7280;
        }
        .alt-link a {
            color: #0f0f0f;
            font-weight: 700;
            text-decoration: none;
            border-bottom: 1.5px solid #0f0f0f;
            padding-bottom: 1px;
            transition: opacity 0.2s;
        }
        .alt-link a:hover { opacity: 0.65; }

        .footer-txt {
            margin-top: 2rem;
            font-size: 0.74rem;
            color: #9ca3af;
            text-align: center;
        }

        @media (max-width: 860px) {
            .left  { display: none; }
            .right { flex: unset; width: 100%; min-height: 100vh; }
        }
    </style>
</head>
<body>

    <!-- LEFT -->
    <div class="left">
        <div class="blob b1"></div>
        <div class="blob b2"></div>
        <div class="blob b3"></div>

        @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));
        @endphp
        <div class="left-inner">
            <div class="brand">
                @if($hasLogo)
                    <img src="{{ asset('uploads/' . $appLogo) }}" style="height:48px;width:auto;max-width:220px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(37,211,102,.4));" alt="{{ $appName }}">
                @else
                    <svg viewBox="0 0 48 48" fill="none" style="width:42px;height:42px;filter:drop-shadow(0 0 16px rgba(37,211,102,.4));">
                        <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>

            <h1 class="headline">Start growing<br>your business<br><em>on WhatsApp.</em></h1>

            <p class="tagline">One platform for campaigns, contacts &amp; conversations.<br>Connect the WhatsApp Cloud API in minutes.</p>

            <div class="perks">
                <div class="perk">
                    <div class="perk-dot">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" width="15" height="15">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.82m5.84-2.56a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.818m2.564-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                        </svg>
                    </div>
                    <div>
                        <span style="display:block;color:rgba(255,255,255,0.85);font-size:0.88rem;font-weight:600;margin-bottom:2px;">WhatsApp Cloud API</span>
                        <span style="font-size:0.8rem;">Connect your official Meta API, send &amp; receive messages at scale with full delivery tracking.</span>
                    </div>
                </div>
                <div class="perk">
                    <div class="perk-dot">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" width="15" height="15">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
                        </svg>
                    </div>
                    <div>
                        <span style="display:block;color:rgba(255,255,255,0.85);font-size:0.88rem;font-weight:600;margin-bottom:2px;">Smart Flowbots</span>
                        <span style="font-size:0.8rem;">Build no-code automation flows — auto-reply, lead capture, order tracking &amp; support bots 24/7.</span>
                    </div>
                </div>
                <div class="perk">
                    <div class="perk-dot">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" width="15" height="15">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
                        </svg>
                    </div>
                    <div>
                        <span style="display:block;color:rgba(255,255,255,0.85);font-size:0.88rem;font-weight:600;margin-bottom:2px;">Bulk Campaigns</span>
                        <span style="font-size:0.8rem;">Send personalised broadcast messages to thousands of contacts with real-time delivery stats.</span>
                    </div>
                </div>
                <div class="perk">
                    <div class="perk-dot">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" width="15" height="15">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
                        </svg>
                    </div>
                    <div>
                        <span style="display:block;color:rgba(255,255,255,0.85);font-size:0.88rem;font-weight:600;margin-bottom:2px;">Multi-Agent Inbox</span>
                        <span style="font-size:0.8rem;">Assign conversations to agents, collaborate as a team — all data fully isolated per company.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- RIGHT -->
    <div class="right">
        <div class="form-wrap">
            <h2>Sign in</h2>
            <p class="sub">Continue to your CRM dashboard</p>

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <div class="field">
                        <span class="field-icon">
                            <svg width="17" height="17" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <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>
                        </span>
                        <input type="email" id="email" name="email" value="{{ old('email') }}"
                            placeholder="you@example.com" autocomplete="email" autofocus
                            class="{{ $errors->has('email') ? 'is-err' : '' }}">
                    </div>
                    @error('email') <div class="err-msg">{{ $message }}</div> @enderror
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="field">
                        <span class="field-icon">
                            <svg width="17" height="17" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
                            </svg>
                        </span>
                        <input type="password" id="password" name="password"
                            placeholder="Enter your password" autocomplete="current-password"
                            class="{{ $errors->has('password') ? 'is-err' : '' }}">
                        <button type="button" class="field-btn" onclick="togglePw('password','ei')">
                            <svg id="ei" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
                            </svg>
                        </button>
                    </div>
                    @error('password') <div class="err-msg">{{ $message }}</div> @enderror
                </div>

                <button type="submit" class="btn">Continue →</button>
            </form>

            <div class="divider">or</div>
            <p class="alt-link">New here? <a href="{{ route('register') }}">Create an account</a></p>
            <p class="footer-txt">By continuing, you agree to our Terms and Privacy Policy.</p>
        </div>
    </div>

    <script>
        function togglePw(id, iconId) {
            const inp  = document.getElementById(id);
            const icon = document.getElementById(iconId);
            const hide = inp.type === 'password';
            inp.type = hide ? 'text' : 'password';
            icon.innerHTML = hide
                ? '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>'
                : '<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>';
        }
    </script>
</body>
</html>
