@extends('layouts.app')
@section('content')
    <div class="container">
        <section class="sns">
            <div class="search-header">
                <div class="search-header__label">
                    <img alt="" src="https://cdn-proxy.globalcontentcloud.com/456/dist/img/slots.0bfdbc0.svg" class="brand-icon brand-icon--sm">
                    <span>Slots</span>
                </div>
                <div class="search-header__content">
                    <div class="slot-game-search">
                        <form>
                            <div class="input--search input__container">
                                <div class="input__root">
                                    <input type="text" autocomplete="off" value="" placeholder="Cari permainan" class="input" data-skip-validation>
                                    <i class="input__icon input__icon--search icon-search icon--md"></i>

                                </div>

                            </div>
                            <button type="submit" class="btn btn--brand">Cari</button>
                        </form>
                    </div>
                </div>
            </div>
            @include('mobile.partials.pages.cardgames')
            <div class="sns__container">
                <div class="sns__game">
                    <button>
                        <picture>
                            <source srcset="https://cdn-proxy.globalcontentcloud.com/common/default/sns/banner-d.webp" media="(min-width: 640px)">
                            <img src="https://cdn-proxy.globalcontentcloud.com/common/default/sns/banner.webp" alt="Stream n'Spin">
                        </picture>
                    </button>
					<div class="sns__detail">
					    <h5>Strategi bersama untuk jackpot!</h5>
					    <span>Wonderland | Ocean Lord | Sir Loin | Tiger Cops</span>
						@php
						    $isLogin = auth()->check();
						@endphp
					    @auth
							<button class="btn btn--accent uppercase" data-launch="{{ $isLogin ? url('/launchgame?sns=1') : '' }}"
							    {{ !$isLogin ? 'data-modal=loginModal' : '' }}>
							    Join the action
							</button>
					    @else
					        <button class="btn btn--accent uppercase" data-modal="loginModal">
					            Join the action
					        </button>
					    @endauth
					
					</div>
                </div>
            </div>
        </section>
    </div>
<script>
	document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-launch]');
        if (!btn) return;

        const url = btn.dataset.launch;

        if (url) {
            window.location.href = url;
            return;
        }
        const modal = btn.dataset.modal;
        if (modal) {
            document.querySelector(`[data-modal-target="${modal}"]`)?.classList.add('open');
        }
    });
});
</script>
@endsection