<!DOCTYPE html>
<html lang="en" data-theme="{{ setting('default_theme', 'dark') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ setting('seo_meta_title') ?: (setting('brand_name', 'AroraPay') . ' - Secure Checkout') }}</title>
    @if($metaDesc = setting('seo_meta_description'))
        <meta name="description" content="{{ $metaDesc }}">
    @endif
    @if($metaKeywords = setting('seo_meta_keywords'))
        <meta name="keywords" content="{{ $metaKeywords }}">
    @endif
    @if($fav = setting('brand_favicon'))
        <link rel="icon" href="{{ asset('uploads/' . $fav) }}">
    @endif
    @if($ogImg = setting('seo_og_image'))
        <meta property="og:image" content="{{ asset('uploads/' . $ogImg) }}">
    @endif
    @if($gaId = setting('google_analytics_id'))
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ $gaId }}"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '{{ $gaId }}');
        </script>
    @endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-main: #111827;
            --text-muted: #6b7280;
            --border-color: #f3f4f6;
            --primary: {{ setting('primary_color', '#6366f1') }};
            --primary-hover: {{ setting('primary_color', '#4f46e5') }};
            --secondary-bg: #f9fafb;
            --glass-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
            --input-bg: #ffffff;
            
            /* Gateway Colors */
            --bkash-color: #e11471;
            --bkash-bg: #fdf2f6;
            --nagad-color: #f37021;
            --nagad-bg: #fff6f0;
            --rocket-color: #8c1561;
            --rocket-bg: #faeff6;
        }

        [data-theme="dark"] {
            --bg-color: #0b0f19;
            --card-bg: #1e293b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-color: #334155;
            --primary: #818cf8;
            --secondary-bg: #0f172a;
            --glass-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
            --input-bg: #0f172a;
            
            --bkash-bg: rgba(225, 20, 113, 0.1);
            --nagad-bg: rgba(243, 112, 33, 0.1);
            --rocket-bg: rgba(140, 21, 97, 0.1);
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 1rem;
        }

        /* Background Graphics */
        .bg-blob {
            position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.3; z-index: -1;
        }
        .blob-1 { top: -10%; left: -10%; width: 45vw; height: 45vw; background: rgba(99, 102, 241, 0.3); }
        .blob-2 { bottom: -10%; right: -10%; width: 50vw; height: 50vw; background: rgba(236, 72, 153, 0.2); }

        .checkout-card {
            background: var(--card-bg);
            width: 100%;
            max-width: 480px;
            border-radius: 1.5rem;
            box-shadow: var(--glass-shadow);
            padding: 2.5rem 2rem;
            box-sizing: border-box;
            position: relative;
            z-index: 10;
        }

        /* Top Header */
        .merchant-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        .merchant-logo {
            width: 44px; height: 44px; border-radius: 0.75rem;
            display: flex; align-items: center; justify-content: center;
            background: #111827; color: #fff; font-weight: 700; font-size: 1.2rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }
        .theme-btn {
            background: var(--card-bg); border: 1px solid var(--border-color);
            width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-muted); cursor: pointer; transition: 0.3s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .theme-btn:hover { color: var(--text-main); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

        /* Amount Banner v1 */
        .amount-banner-v1 {
            background: linear-gradient(135deg, #4f46e5, #8b5cf6);
            color: white; padding: 1.5rem; border-radius: 1rem;
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 1rem; position: relative; overflow: hidden;
            box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.3);
        }
        .amount-banner-v1::after {
            content: ''; position: absolute; right: -30px; bottom: -30px;
            width: 150px; height: 150px; background: rgba(255,255,255,0.1);
            border-radius: 2rem; transform: rotate(15deg);
        }
        .amount-label { font-weight: 500; font-size: 0.9rem; opacity: 0.9; margin-bottom: 0.25rem; }
        .amount-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; }

        /* Amount Banner v2 (Gateway specific) */
        .amount-banner-v2 {
            color: white; padding: 1.5rem; border-radius: 1rem;
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 2rem; position: relative; overflow: hidden;
        }
        .amount-banner-v2.bkash { background: linear-gradient(135deg, #e11471, #a20853); box-shadow: 0 10px 20px -5px rgba(225, 20, 113, 0.3); }
        .amount-banner-v2.nagad { background: linear-gradient(135deg, #ea580c, #c2410c); box-shadow: 0 10px 20px -5px rgba(243, 112, 33, 0.3); }
        .amount-banner-v2.rocket { background: linear-gradient(135deg, #8c1561, #620d43); box-shadow: 0 10px 20px -5px rgba(140, 21, 97, 0.3); }
        
        .secure-text-center {
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            color: var(--text-muted); font-size: 0.85rem; font-weight: 500; margin-bottom: 2rem;
        }

        /* Title */
        .section-title { font-size: 1.25rem; color: var(--text-main); font-weight: 800; margin: 0 0 1.5rem 0; letter-spacing: -0.5px; }

        /* Gateway List */
        .gateway-grid { display: flex; flex-direction: column; gap: 1rem; }
        .gateway-card {
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 1rem;
            padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
            transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        }
        .gateway-card-left { display: flex; align-items: center; gap: 1rem; }
        .gateway-logo-wrap {
            width: 54px; height: 54px; background: white; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.02);
        }
        .gateway-details { display: flex; flex-direction: column; gap: 0.2rem; }
        .gateway-name { font-weight: 800; font-size: 1.05rem; color: var(--text-main); }
        .gateway-desc { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
        .gateway-icon-right { color: var(--text-muted); width: 20px; height: 20px; transition: 0.3s; }

        /* Gateway Hover/Active states */
        .gateway-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }
        
        .gateway-card.hover-bkash:hover { border-color: var(--bkash-color); background: var(--bkash-bg); }
        .gateway-card.hover-nagad:hover { border-color: var(--nagad-color); background: var(--nagad-bg); }
        .gateway-card.hover-rocket:hover { border-color: var(--rocket-color); background: var(--rocket-bg); }

        .gateway-card.hover-bkash:hover .gateway-icon-right { color: var(--bkash-color); }
        .gateway-card.hover-nagad:hover .gateway-icon-right { color: var(--nagad-color); }
        .gateway-card.hover-rocket:hover .gateway-icon-right { color: var(--rocket-color); }

        /* Trust Badges Footer */
        .trust-footer {
            display: flex; justify-content: space-around; padding: 1.5rem 0.5rem; margin-top: 2rem;
            background: transparent; border-radius: 1rem; border: none;
        }
        .trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; width: 30%; }
        .trust-item-icon { 
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 0.5rem; border: 1px solid var(--border-color); background: var(--card-bg);
            color: var(--primary); margin-bottom: 0.2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .trust-item-icon svg { width: 18px; height: 18px; }
        .trust-item b { font-size: 0.8rem; font-weight: 800; color: var(--text-main); }
        .trust-item span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.2; font-weight: 500; }

        /* Verification State */
        .header-v2 {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        .back-btn {
            width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color);
            display: flex; align-items: center; justify-content: center; background: var(--card-bg);
            color: var(--text-main); cursor: pointer; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .header-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; }
        .header-secure { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
        .header-secure svg { color: #10B981; }

        /* Step Timeline */
        .step-list { margin: 0 0 2rem 0; position: relative; }
        .step-item { display: flex; margin-bottom: 1.75rem; position: relative; }
        .step-item::before {
            content: ''; position: absolute; left: 13px; top: 34px; bottom: -28px;
            border-left: 1px solid #d1d5db; z-index: 1;
        }
        .step-item:last-child::before { display: none; }
        
        .step-number {
            width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: white;
            display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;
            z-index: 2; flex-shrink: 0; margin-top: 0.15rem;
        }
        .step-content { margin-left: 1.25rem; flex-grow: 1; }
        .step-title { font-weight: 800; font-size: 1.05rem; color: var(--text-main); margin-bottom: 0.3rem; letter-spacing: -0.5px; }
        .step-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.5; font-weight: 500; }

        .step-1-highlight {
            display: inline-block; background: var(--bkash-bg); color: var(--bkash-color);
            padding: 0.3rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; font-weight: 700;
            margin-top: 0.5rem;
        }
        
        .step-1-icon-box {
            width: 60px; height: 60px; border: 1px solid var(--border-color); border-radius: 0.75rem;
            display: flex; align-items: center; justify-content: center; background: var(--card-bg);
            color: var(--bkash-color); margin-left: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        }

        .copy-box-wrap { display: flex; gap: 1rem; align-items: center; }
        .copy-box {
            display: flex; align-items: center; justify-content: space-between;
            border: 1px solid var(--border-color); background: var(--card-bg);
            border-radius: 0.5rem; padding: 0.75rem 1rem; flex-grow: 1;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .copy-value { font-weight: 800; font-size: 1.05rem; color: var(--text-main); letter-spacing: 0.5px; }
        .btn-copy {
            background: none; border: none; color: var(--primary); font-weight: 800; font-size: 0.85rem;
            display: flex; align-items: center; gap: 0.3rem; cursor: pointer; padding: 0; font-family: 'Outfit', sans-serif;
        }
        .btn-copy.copied { color: #10B981; }

        .qr-box {
            border: 1px solid var(--border-color); border-radius: 0.75rem;
            padding: 0.5rem 0.75rem; text-align: center; background: var(--card-bg); cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .qr-box img { width: 44px; height: 44px; margin-bottom: 0.25rem; }
        .qr-box span { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text-main); }

        /* Input Form */
        .form-group { margin-bottom: 1.5rem; }
        .form-group label {
            display: block; font-weight: 800; font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--text-main);
        }
        .form-control {
            width: 100%; padding: 1.1rem 1.25rem; background: var(--input-bg);
            border: 1px solid var(--primary); border-radius: 0.75rem;
            color: var(--text-main); font-size: 1.05rem; font-family: 'Outfit', sans-serif; font-weight: 500;
            box-sizing: border-box; outline: none; transition: 0.3s;
        }
        .form-control::placeholder { color: var(--text-muted); opacity: 0.6; }

        .btn-submit {
            width: 100%; padding: 1.1rem;
            background: linear-gradient(90deg, #e11471, #d90f6b);
            color: white; border: none; border-radius: 0.75rem;
            font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px;
            cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            box-shadow: 0 10px 20px -5px rgba(225, 20, 113, 0.3); font-family: 'Outfit', sans-serif;
        }
        .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgba(225, 20, 113, 0.4); }
        .btn-submit.bkash { background: linear-gradient(90deg, #e11471, #c80d61); box-shadow: 0 10px 20px -5px rgba(225, 20, 113, 0.3); }
        .btn-submit.nagad { background: linear-gradient(90deg, #ea580c, #c2410c); box-shadow: 0 10px 20px -5px rgba(243, 112, 33, 0.3); }
        .btn-submit.rocket { background: linear-gradient(90deg, #8c1561, #620d43); box-shadow: 0 10px 20px -5px rgba(140, 21, 97, 0.3); }

        .footer-secure {
            text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
            display: flex; align-items: center; justify-content: center; gap: 0.4rem;
        }

        /* Modals & Alerts */
        .qr-modal {
            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
            align-items: center; justify-content: center; z-index: 100;
        }
        .qr-modal.active { display: flex; }
        .qr-content {
            background: var(--card-bg); padding: 2rem; border-radius: 1.5rem; text-align: center;
        }
        .qr-content img { max-width: 220px; border-radius: 1rem; margin-bottom: 1rem; }
    </style>
</head>
<body>

<div class="bg-blob blob-1"></div>
<div class="bg-blob blob-2"></div>

<div class="checkout-card">

    @if(session('success') || session('error') || session('info'))
        <div style="margin-bottom: 1rem;">
            @if(session('success'))
                <div style="padding: 1rem; border-radius: 0.75rem; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; margin-bottom: 1rem;">
                    <b>Success:</b> {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div style="padding: 1rem; border-radius: 0.75rem; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; margin-bottom: 1rem;">
                    <b>Error:</b> {{ session('error') }}
                </div>
            @endif
            @if(session('info'))
                <div style="padding: 1rem; border-radius: 0.75rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; margin-bottom: 1rem;">
                    <b>Notice:</b> {{ session('info') }}
                </div>
            @endif
        </div>
    @endif

    @if(empty($transaction->gateway))
        <!-- STATE 1: GATEWAY SELECTION -->
        @php
            $brandLogoBase64 = null;
            if ($logo = setting('brand_logo')) {
                $path = public_path('uploads/' . $logo);
                if (file_exists($path)) {
                    $brandLogoBase64 = 'data:image/' . pathinfo($path, PATHINFO_EXTENSION) . ';base64,' . base64_encode(file_get_contents($path));
                }
            }
        @endphp
        
        <div class="merchant-header">
            @if($brandLogoBase64)
                <img src="{{ $brandLogoBase64 }}" alt="{{ setting('brand_name', 'AroraPay') }}" style="max-height: 32px; max-width: 140px; object-fit: contain;">
            @else
                <div class="merchant-logo">{{ strtoupper(substr(setting('brand_name', 'AroraPay'), 0, 2)) }}</div>
            @endif
            
            <button type="button" class="theme-btn" onclick="toggleTheme()" title="Toggle Theme">
                <svg id="themeIcon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
            </button>
        </div>

        <div class="amount-banner-v1">
            <div>
                <div class="amount-label">Pay Amount</div>
                <div class="amount-value">{{ number_format($transaction->amount, 2) }} <span style="font-size: 1.1rem; font-weight:600;">{{ $transaction->currency }}</span></div>
            </div>
            <!-- Decorative icon right (Wallet like) -->
            <div style="opacity: 0.9;">
                <svg width="56" height="56" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                    <rect x="15" y="13" width="6" height="4" rx="1" fill="white" opacity="0.5" stroke="none"></rect>
                </svg>
            </div>
        </div>
        
        <div class="secure-text-center">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            Secure Payment
        </div>
        
        <h3 class="section-title">Select Payment Method</h3>
        
        <form action="{{ route('checkout.gateway', $transaction) }}" method="POST" id="gatewayForm">
            @csrf
            <input type="hidden" name="gateway" id="selectedGateway" value="">
            
            <div class="gateway-grid">
                @foreach($gateways as $gateway)
                    @php
                        $lowerName = strtolower($gateway->name);
                        $gatewayKey = strtolower(explode(' ', $gateway->name)[0]);
                        $fileName = strtolower(str_replace(' ', '', $gateway->name)) . '.png';
                        $logoPath = 'assets/gateways/' . $gatewayKey . '/' . $fileName;
                        
                        $hoverClass = '';
                        $subtitle = 'Instant Payment';
                        
                        if (str_contains($lowerName, 'bkash')) { $hoverClass = 'hover-bkash'; $subtitle = 'Fast • Secure • Instant'; }
                        elseif (str_contains($lowerName, 'nagad')) { $hoverClass = 'hover-nagad'; $subtitle = 'Instant • Reliable • Secure'; }
                        elseif (str_contains($lowerName, 'rocket')) { $hoverClass = 'hover-rocket'; $subtitle = 'Mobile Banking'; }
                    @endphp
                    <div class="gateway-card {{ $hoverClass }}" onclick="selectGateway('{{ $gateway->name }}')" onmouseenter="hoverGateway(this, true)" onmouseleave="hoverGateway(this, false)">
                        <div class="gateway-card-left">
                            <div class="gateway-logo-wrap">
                                @if(file_exists(public_path($logoPath)))
                                    <img src="{{ asset($logoPath) }}" alt="{{ $gateway->name }}" style="max-height: 32px; max-width: 36px; object-fit: contain;">
                                @else
                                    <span style="font-size:1.25rem; font-weight:800; color:#0f172a;">{{ strtoupper(substr($gateway->name, 0, 1)) }}</span>
                                @endif
                            </div>
                            <div class="gateway-details">
                                <span class="gateway-name">{{ $gateway->display_name }}</span>
                                <span class="gateway-desc">{{ $subtitle }}</span>
                            </div>
                        </div>
                        <div class="icon-container">
                            <svg class="gateway-icon-right" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                    </div>
                @endforeach
            </div>
        </form>
        
        <div class="trust-footer">
            <div class="trust-item">
                <div class="trust-item-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                </div>
                <b>100% Secure</b>
                <span>Your data is safe</span>
            </div>
            <div class="trust-item">
                <div class="trust-item-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                </div>
                <b>Trusted by<br>Millions</b>
            </div>
            <div class="trust-item">
                <div class="trust-item-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <b>Instant<br>Processing</b>
            </div>
        </div>

    @else
        <!-- STATE 2: PAYMENT VERIFICATION -->
        @php
            $lowerName = strtolower($transaction->gateway);
            $gatewayType = 'default';
            $themeClass = '';
            $themeColor = 'var(--primary)';
            
            if (str_contains($lowerName, 'bkash')) { $gatewayType = 'bkash'; $themeClass = 'text-bkash'; $themeColor = 'var(--bkash-color)'; }
            elseif (str_contains($lowerName, 'nagad')) { $gatewayType = 'nagad'; $themeClass = 'text-nagad'; $themeColor = 'var(--nagad-color)'; }
            elseif (str_contains($lowerName, 'rocket')) { $gatewayType = 'rocket'; $themeClass = 'text-rocket'; $themeColor = 'var(--rocket-color)'; }
            elseif (str_contains($lowerName, 'binance')) { $gatewayType = 'binance'; $themeClass = 'text-binance'; $themeColor = '#F0B90B'; }
            
            $methodAction = (str_contains($lowerName, 'merchant') || str_contains($lowerName, 'payment')) ? 'Payment' : 'Send Money';
            $gName = explode(' ', $transaction->gateway)[0];

            // BDT to USD conversion logic
            $usdRate = floatval(setting('usd_rate', 115));
            if ($usdRate <= 0) $usdRate = 115;
            
            $isUsdGateway = false;
            $usdKeywords = ['binance', 'bybit', 'cryptomus', 'paddle', 'payeer', 'paypal', 'stripe'];
            foreach ($usdKeywords as $keyword) {
                if (str_contains($lowerName, $keyword)) {
                    $isUsdGateway = true;
                    break;
                }
            }
            
            $displayAmount = $transaction->amount;
            $displayCurrency = $transaction->currency;
            
            if ($isUsdGateway && $transaction->currency === 'BDT') {
                $displayAmount = $transaction->amount / $usdRate;
                $displayCurrency = isset($gatewayInfo->credentials['payment_currency']) ? $gatewayInfo->credentials['payment_currency'] : 'USDT';
            }
        @endphp

        <div class="header-v2">
            <form action="{{ route('checkout.reset_gateway', $transaction) }}" method="POST" style="margin: 0;">
                @csrf
                <button type="submit" class="back-btn" title="Back">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                </button>
            </form>
            
            <div class="header-title {{ $themeClass }}" style="@if($gatewayType == 'binance') color: #F0B90B; @endif">
                @if($gatewayType == 'bkash') bKash
                @elseif($gatewayType == 'nagad') Nagad
                @elseif($gatewayType == 'rocket') Rocket
                @else {{ strtoupper($gName) }}
                @endif
            </div>

            <div class="header-secure">
                <svg width="18" height="18" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                100% Secure
            </div>
        </div>

        <div class="amount-banner-v2 {{ $gatewayType }}" style="@if($gatewayType == 'binance') background: linear-gradient(135deg, #F0B90B, #d39e00); box-shadow: 0 10px 20px -5px rgba(240, 185, 11, 0.3); @endif">
            <div>
                <div class="amount-label">Amount to Pay</div>
                <div class="amount-value">
                    {{ number_format($displayAmount, 2) }} <span style="font-size: 1rem; font-weight:600;">{{ $displayCurrency }}</span>
                </div>
                @if($isUsdGateway && $transaction->currency === 'BDT')
                    <div style="font-size: 0.8rem; opacity: 0.8; margin-top: 4px;">Converted from {{ number_format($transaction->amount, 2) }} BDT</div>
                @endif
            </div>
            <!-- Decorative icon right (Origami bird for bkash, or generic) -->
            <div style="opacity: 0.9;">
                @if($gatewayType == 'bkash')
                <svg width="56" height="56" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L22 18L12 14L2 18L12 2Z" opacity="0.9"/>
                    <path d="M12 14L22 18L12 22L2 18L12 14Z" fill="white" opacity="0.6"/>
                </svg>
                @elseif($gatewayType == 'binance')
                <svg width="48" height="48" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L6 8l6 6l6-6l-6-6zm0 14l-6-6l-3.5 3.5L12 21.5l9.5-8L18 10l-6 6z" />
                </svg>
                @else
                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                @endif
            </div>
        </div>

        @if($transaction->status === 'PENDING')
            @if(str_contains(strtolower($transaction->gateway), 'binance'))
                <!-- BINANCE PAY CUSTOM VIEW (TIMELINE DESIGN) -->
                @php
                    $binanceId = isset($gatewayInfo->credentials['binance_id']) ? $gatewayInfo->credentials['binance_id'] : '445094393';
                    $win = isset($gatewayInfo->credentials['verification_window']) ? $gatewayInfo->credentials['verification_window'] : '15';
                @endphp

                <!-- Merchant info and quick info bar -->
                <div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.5rem;">
                    <!-- Merchant info -->
                    <div style="background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
                        <div style="width: 32px; height: 32px; background: #F0B90B; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;">
                            <span style="font-weight: 800; font-size: 14px;">A</span>
                        </div>
                        <div style="overflow: hidden;">
                            <div style="font-size: 9px; color: var(--text-muted); font-weight: 700; text-transform: uppercase;">Merchant</div>
                            <div style="font-size: 12px; font-weight: 800; color: var(--text-main); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%;">AroraShop</div>
                        </div>
                    </div>
                    <!-- Amount info -->
                    <div style="background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: center; flex: 1; font-weight: 800; font-size: 16px; color: var(--text-main); box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
                        {{ number_format($displayAmount, 2) }} {{ $displayCurrency }}
                    </div>
                </div>

                <div class="step-list">
                    <div class="step-item">
                        <div class="step-number" style="background: #F0B90B">1</div>
                        <div class="step-content">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <div>
                                    <div class="step-title" style="font-size: 1.15rem; font-weight: 800;">Send Money</div>
                                    <div class="step-desc" style="font-size: 0.95rem; line-height: 1.6;">
                                        Open Binance App &rarr; Pay &rarr; Send to Binance User or 
                                        <a href="https://binance.com/my/wallet/account/payment/send" target="_blank" style="color: #F0B90B; font-weight: 800; text-decoration: underline;">Click here</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: #F0B90B">2</div>
                        <div class="step-content">
                            <div class="step-title" style="font-size: 1.15rem; font-weight: 800;">Send to Binance ID</div>
                            <div class="step-desc" style="font-size: 0.95rem; line-height: 1.6;">Send to the following Binance ID</div>
                            <div class="copy-box-wrap">
                                <div class="copy-box">
                                    <span class="copy-value" id="binanceIdVal" style="font-size: 1.1rem; font-weight: 700;">{{ $binanceId }}</span>
                                    <button type="button" class="btn-copy" onclick="copyData('binanceIdVal', this, '#F0B90B')" style="color: #F0B90B; font-size: 0.95rem; font-weight: 800;">
                                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> Copy
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: #F0B90B">3</div>
                        <div class="step-content">
                            <div class="step-title" style="font-size: 1.15rem; font-weight: 800;">Enter Amount</div>
                            <div class="step-desc" style="font-size: 0.95rem; line-height: 1.6;">Enter the exact amount below in USDT</div>
                            <div class="copy-box-wrap">
                                <div class="copy-box" style="width:75%;">
                                    <span class="copy-value" id="binanceAmtVal" style="font-size: 1.1rem; font-weight: 700;">{{ number_format($displayAmount, 8, '.', '') }} <span style="font-size:0.85rem; color:var(--text-muted); font-weight:600;">USDT</span></span>
                                    <button type="button" class="btn-copy" onclick="copyData('binanceAmtVal', this, '#F0B90B')" style="color: #F0B90B; font-size: 0.95rem; font-weight: 800;">
                                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> Copy
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: #F0B90B">4</div>
                        <div class="step-content">
                            <div class="step-title" style="font-size: 1.15rem; font-weight: 800;">Submit Order ID</div>
                            <div class="step-desc" style="font-size: 0.95rem; line-height: 1.6;">Complete payment, then enter the Order ID below</div>
                            
                            <form action="{{ route('checkout.submit', $transaction) }}" method="POST" style="margin-top: 1rem;">
                                @csrf
                                <div class="form-group">
                                    <label for="trx_id" style="font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.5rem; display: block;">Order ID</label>
                                    <input type="text" id="trx_id" name="trx_id" class="form-control" placeholder="Enter Order ID" required autocomplete="off" style="border-color: #F0B90B; padding: 0.85rem 1.1rem; font-size: 1rem;">
                                </div>
                                <button type="submit" class="btn-submit" style="background: #F0B90B; font-size: 1.05rem; font-weight: 800; padding: 1rem; box-shadow: 0 10px 20px -5px rgba(240, 185, 11, 0.3);">
                                    <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                                    Verify
                                </button>
                            </form>
                            <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.75rem; font-style: italic; font-weight: 500;">
                                Note: Please verify within {{ $win }} minutes of making your payment
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- STANDARD MFS STEP TIMELINE -->
                <div class="step-list">
                    <div class="step-item">
                        <div class="step-number" style="background: {{ $themeColor }}">1</div>
                        <div class="step-content">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <div>
                                    <div class="step-title">Send Money</div>
                                    <div class="step-desc">Go to your {{ $gName }} Mobile App<br>and choose</div>
                                    <div class="step-1-highlight" style="color:{{ $themeColor }}; background:{{ $gatewayType == 'bkash' ? 'var(--bkash-bg)' : 'var(--secondary-bg)' }}">'{{ $methodAction }}'</div>
                                </div>
                                <div class="step-1-icon-box" style="color:{{ $themeColor }}">
                                    <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 11l4-2m-4 4l4-2"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: {{ $themeColor }}">2</div>
                        <div class="step-content">
                            <div class="step-title">Enter Number</div>
                            <div class="step-desc">Enter the following number</div>
                            <div class="copy-box-wrap">
                                <div class="copy-box">
                                    <span class="copy-value" id="copyNumberVal">{{ isset($gatewayInfo) && $gatewayInfo->number ? $gatewayInfo->number : '017XXXXXXXX' }}</span>
                                    <button type="button" class="btn-copy" onclick="copyData('copyNumberVal', this, '{{ $themeColor }}')" style="color:{{ $themeColor }}">
                                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> Copy
                                    </button>
                                </div>
                                @if(isset($gatewayInfo) && $gatewayInfo->qr_code)
                                <div class="qr-box" onclick="document.getElementById('qrModal').classList.add('active')">
                                    <img src="{{ asset('uploads/' . $gatewayInfo->qr_code) }}" alt="QR">
                                    <span>Scan QR</span>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: {{ $themeColor }}">3</div>
                        <div class="step-content">
                            <div class="step-title">Enter Amount</div>
                            <div class="step-desc">Enter the amount</div>
                            <div class="copy-box-wrap">
                                <div class="copy-box" style="width:70%;">
                                    <span class="copy-value" id="copyAmountVal">{{ number_format($transaction->amount, 2) }} <span style="font-size:0.8rem; color:var(--text-muted); font-weight:600;">BDT</span></span>
                                    <button type="button" class="btn-copy" onclick="copyData('copyAmountVal', this, '{{ $themeColor }}')" style="color:{{ $themeColor }}">
                                        <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> Copy
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="step-item">
                        <div class="step-number" style="background: {{ $themeColor }}">4</div>
                        <div class="step-content">
                            <div class="step-title">Submit Transaction ID</div>
                            <div class="step-desc">Enter the Transaction ID below</div>
                            
                            <form action="{{ route('checkout.submit', $transaction) }}" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label for="trx_id">Transaction ID</label>
                                    <input type="text" id="trx_id" name="trx_id" class="form-control" placeholder="e.g. 9B5V2M9E8" required autocomplete="off" style="border-color: {{ $themeColor }};">
                                </div>
                                <button type="submit" class="btn-submit {{ $gatewayType }}">
                                    <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                    VERIFY PAYMENT
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endif

            <div class="footer-secure">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                Your payment is 100% secure and encrypted
            </div>

            @if(isset($gatewayInfo) && $gatewayInfo->qr_code)
                <div class="qr-modal" id="qrModal" onclick="this.classList.remove('active')">
                    <div class="qr-content" onclick="event.stopPropagation()">
                        <h3 style="margin-top:0; color:var(--text-main); font-weight:800;">Scan to Pay</h3>
                        <p style="color:var(--text-muted); font-size:0.9rem; margin-bottom:1.5rem;">Open {{ $gName }} app and scan the code</p>
                        <img src="{{ asset('uploads/' . $gatewayInfo->qr_code) }}" alt="QR Code">
                        <div>
                            <button type="button" class="btn-submit" style="padding: 0.75rem; width:auto; padding: 0.75rem 2rem; margin: 0 auto;" onclick="document.getElementById('qrModal').classList.remove('active')">Close</button>
                        </div>
                    </div>
                </div>
            @endif

        @else
            <div style="text-align:center; padding: 3rem 1rem;">
                <div style="width:80px; height:80px; background:#10B981; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem auto;">
                    <svg width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <h2 style="margin: 0 0 0.5rem 0; font-weight:800; color:var(--text-main);">Payment Verified!</h2>
                @if(!empty($transaction->redirect_url))
                    <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem;">Redirecting to merchant site in <b id="countdown" style="color:var(--primary);">3</b> seconds...</p>
                    @php
                        $redirectUrl = $transaction->redirect_url;
                        $separator = str_contains($redirectUrl, '?') ? '&' : '?';
                        $finalUrl = $redirectUrl . $separator . 'status=SUCCESS&reference_id=' . urlencode($transaction->reference_id) . '&trx_id=' . urlencode($transaction->trx_id);
                    @endphp
                    <a href="{{ $finalUrl }}" class="btn-submit" style="text-decoration:none; display:inline-flex;">Return to Merchant</a>
                    <script>
                        let count = 3;
                        setInterval(function() {
                            count--;
                            if(count > 0) {
                                document.getElementById('countdown').innerText = count;
                            } else {
                                window.location.href = "{!! $finalUrl !!}";
                            }
                        }, 1000);
                    </script>
                @else
                    <p style="color: var(--text-muted); font-size: 0.95rem;">You may now close this window and return to the merchant site.</p>
                @endif
        @endif
    @endif

    @if(setting('show_faq_on_checkout', 1) && !empty(setting('faqs')))
        @php $faqsList = setting('faqs'); @endphp
        @if(is_array($faqsList) && count($faqsList) > 0)
            <div style="margin-top: 1.5rem; border-top: 1px dashed var(--border-color); padding-top: 1.25rem;">
                <h4 style="font-size: 0.85rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Frequently Asked Questions
                </h4>
                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                    @foreach($faqsList as $faq)
                        @if(!empty($faq['question']))
                            <details style="background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 0.6rem 0.85rem; font-size: 0.825rem; cursor: pointer;">
                                <summary style="font-weight: 600; color: var(--text-main); outline: none;">{{ $faq['question'] }}</summary>
                                <p style="margin-top: 0.4rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 0;">{{ $faq['answer'] ?? '' }}</p>
                            </details>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
    @endif

    <div style="text-align: center; margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-muted);">
        {{ setting('footer_text', '© ' . date('Y') . ' ' . setting('brand_name', 'AroraPay') . '. All rights reserved.') }}
    </div>
</div>

<script>
    function hoverGateway(el, isEnter) {
        const iconContainer = el.querySelector('.icon-container');
        if (!iconContainer) return;
        
        if (isEnter) {
            // Transform arrow to checkmark in a circle
            iconContainer.innerHTML = '<div style="width:24px;height:24px;border-radius:50%;background:currentColor;display:flex;align-items:center;justify-content:center;color:white;"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg></div>';
            iconContainer.style.color = window.getComputedStyle(el).borderColor; 
        } else {
            // Revert back to arrow
            iconContainer.innerHTML = '<svg class="gateway-icon-right" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>';
            iconContainer.style.color = '';
        }
    }

    function selectGateway(name) {
        document.getElementById('selectedGateway').value = name;
        document.getElementById('gatewayForm').submit();
    }

    function copyData(elementId, btn, color) {
        const text = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(text).then(() => {
            const originalHtml = btn.innerHTML;
            btn.innerHTML = '<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Copied';
            btn.classList.add('copied');
            btn.style.color = '#10B981';
            setTimeout(() => {
                btn.innerHTML = originalHtml;
                btn.classList.remove('copied');
                btn.style.color = color || 'var(--primary)';
            }, 2000);
        });
    }

    // Theme Management
    const htmlEl = document.documentElement;
    const themeIcon = document.getElementById('themeIcon');
    
    const moonPath = "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z";
    const sunPath = "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z";

    function setTheme(theme) {
        htmlEl.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
        if(themeIcon) {
            themeIcon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${theme === 'dark' ? sunPath : moonPath}"></path>`;
        }
    }

    function toggleTheme() {
        const currentTheme = htmlEl.getAttribute('data-theme');
        setTheme(currentTheme === 'light' ? 'dark' : 'light');
    }

    // Init theme
    const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    setTheme(savedTheme);

    @if($transaction->trx_id && $transaction->status === 'PENDING')
        // Auto reload every 5 seconds to check if payment is verified
        setTimeout(function() {
            window.location.reload();
        }, 5000);
    @endif
</script>

</body>
</html>
