@auth
    <script>window.location.href = "/userarea";</script>
@endauth
<header class="header">
    <div class="header-content">
        
        <div class="logo" href="{{ url('/') }}">
            <a href="{{ url('/') }}">
                <img src="{{ general()->logo }}" class="logoimg" alt="">
            </a>
        </div>

        <div id="marquee-mobile" class="marquee mobile-only">
            <div class="marquee-content">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-volume-down" style="padding: 0 2px; font-size: 16px"></i>
                </div>
                <div class="running">
                    <div class="marquee-shadow"></div>
                    <marquee behavior="scroll" direction="" id="broadcast" style="width: 100%">
                        {{ general()->deskripsi }}
                    </marquee>
                </div>
                <div class="d-flex align-items-center gap-2"></div>
            </div>
        </div>

        <div class="mslider mobile-only">
            <div id="myCarousel" class="carousel slide pointer-event" data-bs-ride="carousel" style="height: 100%">
                <div class="carousel-indicators">
                    @foreach(banner() as $index => $slide)
                        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="{{ $index }}" class="{{ $loop->first ? 'active' : '' }}" aria-current="{{ $loop->first ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
                    @endforeach
                </div>
                <div class="carousel-inner" style="height: 100%">
                    @foreach(banner() as $slide)
                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}" style="height: 100%">
                            <img src="{{ $slide->gambar }}" class="d-block w-100 banner" alt="{{ general()->brand }}" style="height: 100%">
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="login mobile-only">
            <div id="mobilelogin" class="mobile-only" style="width: 100%">
                <form id="loginForm" class="login-form form" style="padding: 0px; padding-top: 16px" role="form" action="{{ route('api.v2_acc_login') }}" method="POST">
                    @csrf
                    
                    @mobile
                            <div id="msgbox" style="font-size: 1rem; width: 100%; display:none;" class="alert alert-sm"></div>
                        @endmobile

                    <div class="input-group login-field">
                        <span class="input-group-text prepend mobile-only ">
                            <div class="h-100 center"><i class="bi bi-person-circle prepend-icon"></i></div>
                        </span>
                        <input type="text" name="username" class="form-control login-input-field username" placeholder="Username" aria-label="Username" minlength="5" maxlength="16" required="">
                    </div>

                    <div class="input-group login-field">
                        <span class="input-group-text mobile-only prepend">
                            <div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div>
                        </span>
                        <input type="password" name="password" class="login-input-field form-control login-input-field password" placeholder="Password" aria-label="Password" minlength="6" maxlength="16" required="">
                    </div>

                    <div class="verifikasiform w-100">
                        <span id="mcapverifikasi"><img id="mcapimg" src="/mcapimg?r={{ rand() }}" width="100%" height="36" style="border-radius: 5px;"></span>
                        <div class="input-group login-field mt-1">
                            <span class="input-group-text mobile-only prepend">
                                <div class="h-100 center"><i class="bi bi-person-fill-check prepend-icon"></i></div>
                            </span>
                            <input type="text" class="form-control login-input-field" name="captcha" autocomplete="off" placeholder="Verifikasi">
                        </div>
                        <input type="hidden" name="token" value="{{ csrf_token() }}">
                    </div>
                    

                    <label style="font-size:12px;display:flex;align-items:center;margin-top:2px;margin-bottom:4px;cursor:pointer;">
                        <input type="checkbox" id="rememberMe" name="remember" style="margin-right:4px;width:12px;height:12px;cursor:pointer;"> Remember Me
                    </label>

                    <button type="submit" value="true" class="btn btn-masuk fw-bold p-0 px-2">Masuk</button>
                    <button type="button" class="btn btn-daftar btn-info btn-daftar-mobile fw-bold p-0 px-2 mobile-only" onclick="openDaftar()">Daftar Sekarang</button>
                </form>
            </div>

            <style>
                .error-msg { color: red; font-size: 12px; margin-top: 3px; display: none; }
                .error-border { border-color: red !important; }
                .valid-border { border-color: green !important; }
            </style>

            <div id="mobile-daftar-form" style="width: 100%; display: none">
                <div id="mobileregister">
                    <form id="formRegister" class="login-form p-0 pt-4" action="{{ route('api.register') }}" method="POST">
                        @csrf
                        
                        <input type="hidden" name="ipAddress" value="{{ request()->ip() }}">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">

                        <div id="statusRegister" style="margin-bottom: 5px; width: 100%"></div>
                        <div class="prepend" style="width: 100%; height: 36px; display: grid; place-items: center; border-radius: 3px; font-size: 1.2rem; font-weight: bold">DAFTAR</div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-person-circle prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" name="username" id="reg_username" placeholder="Username 6-16 karakter standar (A~Z, a~z, 0~9) dan tanpa spasi">
                        </div>
                        <div class="error-msg" id="err_username"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div></span>
                            <input type="password" class="form-control login-input-field" id="reg_pass" name="password" placeholder="Password (6 karakter atau lebih)">
                        </div>
                        <div class="error-msg" id="err_password"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div></span>
                            <input type="password" class="form-control login-input-field" id="reg_passcon" name="cpassword" placeholder="Password sekali lagi">
                        </div>
                        <div class="error-msg" id="err_passcon"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-envelope-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" id="reg_email" name="email" placeholder="Email">
                        </div>
                        <div class="error-msg" id="err_email"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-telephone-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" id="reg_telpon" name="phone" placeholder="Telpon">
                        </div>
                        <div class="error-msg" id="err_telpon"></div>

                        <div class="input-group login-field">
                            <select class="form-select login-input-field" name="bankName" id="reg_bank">
                                <option value="">Pilih Bank</option>
                                <option value="BCA">BCA</option>
                                <option value="Mandiri">Mandiri</option>
                                <option value="BNI">BNI</option>
                                <option value="BRI">BRI</option>
                                <option value="CIMB">CIMB</option>
                                <option value="BSI">BSI</option>
                                <option value="JAGO">JAGO</option>
                                <option value="DANA">DANA</option>
                                <option value="OVO">OVO</option>
                                <option value="GOPAY">GOPAY</option>
                                <option value="LinkAja">LinkAja</option>
                                <option value="Lain-lain">Lain-lain</option>
                            </select>
                        </div>
                        <div class="error-msg" id="err_bank"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-piggy-bank-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" name="accNumber" id="reg_rek" placeholder="No Rekening">
                        </div>
                        <div class="error-msg" id="err_rek"></div>

                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-person-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" name="accName" id="reg_nama" placeholder="Nama Rekening">
                        </div>
                        <div class="error-msg" id="err_nama"></div>

                        @if(!empty(request()->query('ref')))
                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-file-earmark-person-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" name="referral" id="reg_ref" value="{{ e(request()->query('ref')) }}" readonly="">
                        </div>
                        <div class="error-msg" id="err_ref"></div>
                        @else
                        <div class="input-group login-field">
                            <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-file-earmark-person-fill prepend-icon"></i></div></span>
                            <input type="text" class="form-control login-input-field" name="referral" id="reg_ref" placeholder="Username Referal bila ada">
                        </div>
                        <div class="error-msg" id="err_ref"></div>
                        @endif

                        <div class="verifikasiform w-100 my-1">
                            <div id="capverifikasi">
                                <img id="mcapreg" src="/mcapreg?r={{ rand() }}" width="100%" style="border-radius: 5px;margin-top: -3px; height: 44px">
                            </div>
                            <div class="input-group login-field mt-1">
                                <span class="input-group-text mobile-only prepend"><div class="h-100 center"><i class="bi bi-person-fill-check prepend-icon"></i></div></span>
                                <input type="text" class="form-control login-input-field" name="captcha" id="reg_verifikasi" placeholder="Verifikasi" style="padding: 10px;" autocomplete="off">
                            </div>
                            <div class="error-msg" id="err_verifikasi"></div>
                        </div>
                        

                        <button type="submit" class="btn btn-masuk fw-bold p-0 px-2" value="Register">Daftar</button>
                        <button type="button" class="btn btn-secondary fw-bold p-0 px-2" value="Close" onclick="closeDaftar()" id="buttonClose">Close</button>
                    </form>
                </div>

                
            </div>
        </div>

        <div class="menu">
            <style>
                .menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 72px; padding: 8px; height: 100%; }
                .menu-item:hover { background: linear-gradient(180deg, var(--secondary-background) 0%, rgba(255, 255, 255, 0) 100%); }
                .menu-item.active { background: linear-gradient(180deg, var(--secondary-background) 0%, rgba(255, 255, 255, 0) 100%); }
                .menu-item-img { height: 28px; }
                .menu-item-icon { font-size: 28px; color: var(--menu-item-color) }
                .menu-item:hover>.menu-item-icon { color: var(--primary-color); }
            </style>

            <a href="{{ route('index') }}" class="menu-item active">
                <i class="menu-item-icon icon-home" style="font-size: 28px"></i>
                <label>HOME</label>
            </a>

            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-togel')" onmouseout="hideProducts('hover-togel')">
                <i class="menu-item-icon icon-lottery" style="font-size: 28px"></i>
                <label>TOGEL</label>
            </a>

            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-slot')" onmouseout="hideProducts('hover-slot')">
                <i class="menu-item-icon icon-slots"></i>
                <label>SLOT</label>
            </a>
            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-live')" onmouseout="hideProducts('hover-live')">
                <i class="menu-item-icon icon-casino"></i>
                <label>LIVE CASINO</label>
            </a>
            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-sport')" onmouseout="hideProducts('hover-sport')">
                <i class="menu-item-icon icon-sports"></i>
                <label>SPORT</label>
            </a>
            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-sabung')" onmouseout="hideProducts('hover-sabung')">
                <i class="menu-item-icon icon-sabung"></i>
                <label>SABUNG</label>
            </a>
            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-fishing')" onmouseout="hideProducts('hover-fishing')">
                <i class="menu-item-icon icon-arcade"></i>
                <label>ARCADE</label>
            </a>
            <a href="{{ url('/register') }}" class="menu-item" onmouseover="showProducts('hover-interactive')" onmouseout="hideProducts('hover-interactive')">
                <i class="menu-item-icon icon-interactive"></i>
                <label>INTERACTIVE</label>
            </a>
        </div>

        <div class="menu-mobile mobile-only" style="width: 100%; overflow-x: hidden; position: relative; border-top: 3px solid var(--primary-color); border-bottom: 3px solid var(--theme-color)">
            <div style="position: absolute; height: 100%; background: var(--primary-color); display: grid; place-items: center; left: 0; padding: 0px 6px" onclick="document.getElementById('menu-mobile').scrollBy(-40, 0)">
                <i class="bi bi-caret-left-fill" style="font-size: 16px; color: var(--marquee-color)"></i>
            </div>

            <div style="position: absolute; height: 100%; background: var(--primary-color); display: grid; place-items: center; right: 0; padding: 0px 6px;" onclick="document.getElementById('menu-mobile').scrollBy(40, 0)">
                <i class="bi bi-caret-right-fill" style="font-size: 16px; color: var(--marquee-color)"></i>
            </div>

            <div id="menu-mobile" style="height:60px; overflow-x: scroll; overflow-y: hidden; max-width: 100%; display: block; margin-left: 28px; margin-right: 28px; background: linear-gradient(90deg, rgba(26,26,26,0.3) 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 100%), var(--primary-color)">
                <div style="white-space: nowrap; height: 100%; font-size: 0px">
                    
                    <a href="#togel-mobile" style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/lottery.png" alt="">
                                <label class="text-white">TOGEL</label>
                            </div>
                        </div>
                    </a>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/slots.png" alt="">
                                <label class="text-white">SLOT</label>
                            </div>
                        </div>
                    </div>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/casino.png" alt="">
                                <label class="text-white">LIVE CASINO</label>
                            </div>
                        </div>
                    </div>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/sports.png" alt="">
                                <label class="text-white">SPORT</label>
                            </div>
                        </div>
                    </div>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/arcade.png" alt="">
                                <label class="text-white">ARCADE</label>
                            </div>
                        </div>
                    </div>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/sabung.png" alt="">
                                <label class="text-white">SABUNG</label>
                            </div>
                        </div>
                    </div>

                    <div style="height: 100%; width: 74px; display: inline-block;">
                        <div style="display: grid; place-items: center; height: 100%">
                            <div class="menu-item" style="gap: 8px" onclick="window.location.href='{{ url('/register') }}'">
                                <img class="mobile-only" src="https://img.viva88athenae.com//icons/interactive.png" alt="">
                                <label class="text-white">INTERACTIVE</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="menu-content mobile-only">
            <div id="main-content" style="background: var(--content-box-background)"></div>
        </div>

        <div class="promosi">
            <div class="desktop-only h-100">
                <div class="d-flex align-items-center h-100">
                    <a href="{{ url('/promosi') }}" class="menu-item">
                        <i class="menu-item-icon icon-promotion"></i>
                        <label>PROMOSI</label>
                    </a>
                    <a href="{{ url('/event') }}" class="menu-item">
                        <i class="menu-item-icon icon-event"></i>
                        <label>EVENT</label>
                    </a>
                </div>
            </div>

            <div class="mobile-only" style="padding-top: 24px">
                <div class="d-flex gap-3 justify-content-center align-items-center">
                    <a href="/" style="display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; color: var(--menu-item-color)">Desktop</a>
                    <div style="height: 1.1rem; width: 1.5px; background: var(--menu-item-color)"></div>
                    <a href="/" style="display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; color: var(--menu-item-color)">Wap</a>
                </div>
            </div>
        </div>

    </div>
</header>