@extends('layouts.app')
@section('content')
<div class="container">
    <section class="home">
        <div class="home-carousel">
            @if (!empty($banner) && count($banner) > 0)
                <div class="slick-slider">
                    @foreach ($banner as $row)
                        <div>
                            <a href="{{ $row['link'] ?? '#' }}" style="display:inline-block; width:100%;">
                                <img src="{{ $row->image }}" alt="{{ $row->title ?? 'banner' }}" class="slick-list" loading="lazy" style="width:100%; object-fit:cover; border-radius:10px;">
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
			            <!-- TEASER -->
			 <div class="home__teaser">
			
			     @if (!$isLoggedIn)
			     <a data-v-1272be00="" href="/promotions/all" class="btn btn--flex btn--accent-secondary"><i data-v-0e010622="" data-v-1272be00="" class="icon-promo icon--lg"></i>
			         Promosi
			     </a>
			
			     <a data-v-1272be00="" href="/register" class="btn btn--flex btn--brand"><i data-v-0e010622="" data-v-1272be00="" class="icon-register icon--lg"></i>
			         Daftar
			     </a>
			
			     <button class="app-button btn btn--flex btn--accent" data-modal="loginModal">
			         <i data-v-0e010622="" class="icon-login icon--lg"></i>
			         <span>Masuk</span>
			     </button>
			     @else
			     <a data-v-1272be00="" href="/promotions/all" class="btn btn--flex btn--accent-secondary"><i data-v-0e010622="" data-v-1272be00="" class="icon-promo icon--lg"></i>
			         Promosi
			     </a>
			
			     <a data-v-1272be00="" href="history" class="btn btn--flex btn--accent"><i data-v-0e010622="" data-v-1272be00="" class="icon-history icon--lg"></i>
			         Histori
			     </a>
			
			     <a data-v-1272be00="" href="/deposit" class="btn btn--flex btn--success"><i data-v-0e010622="" data-v-1272be00="" class="icon-deposit icon--lg"></i>
			         Deposit
			     </a>
			     @endif
			
			 </div>
            <!-- RUNNING TEXT -->
            <div class="running-text running-text--primary">
                <i class="icon-volume icon--md"></i>
                <marquee>
                    Selamat datang di {{ $title }}!
                    Silakan masuk atau daftar jika Anda belum memiliki akun.
                    Jadilah pemenang berikutnya dan rasakan keseruan bermain di {{ $title }}!
                </marquee>
            </div>

            <!-- MENU -->
            <nav class="app-menu app-menu--shadow-end">
                <ul>
                	
                	<li class="app-menu__item">
                        <a href="/exclusive">
                            <img src="{{ $urlweb }}/assets/svg/menu/exclusive.svg" class="brand-icon brand-icon--md">
                            <span>Ekslusif</span>
                        </a>
                    </li>
                	
                    <li class="app-menu__item">
                        <a href="/sports">
                            <img src="{{ $urlweb }}/assets/svg/menu/sports.svg" class="brand-icon brand-icon--md">
                            <span>Sports+</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/slots">
                            <img src="{{ $urlweb }}/assets/svg/menu/slots.svg" class="brand-icon brand-icon--md">
                            <span>Slots</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/casino">
                            <img src="{{ $urlweb }}/assets/svg/menu/casino.svg" class="brand-icon brand-icon--md">
                            <span>Casino</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/poker">
                            <img src="{{ $urlweb }}/assets/svg/menu/poker.svg" class="brand-icon brand-icon--md">
                            <span>Poker</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/lotto">
                            <img src="{{ $urlweb }}/assets/svg/menu/lotto.svg" class="brand-icon brand-icon--md">
                            <span>Lotto</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/arcade">
                            <img src="{{ $urlweb }}/assets/svg/menu/arcade.svg" class="brand-icon brand-icon--md">
                            <span>Arcade</span>
                        </a>
                    </li>

                    <li class="app-menu__item">
                        <a href="/fishing">
                            <img src="{{ $urlweb }}/assets/svg/menu/fishing.svg" class="brand-icon brand-icon--md">
                            <span>Fishing</span>
                        </a>
                    </li>
                </ul>
            </nav>

            {{-- PARTIAL --}}
             @include('mobile.partials.home') 

        </section>
    </div>
    @endsection