@extends('frontend.layouts.app')

@section('content')

    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            <section class="box">
                <div class="box__detail">
                    <div class="pbox">
                        <div class="promotionInfo m">
                            <div class="promo_dropown">
                                <a href="#" data-toggle="dropdown" aria-expanded="false">
                                    All Promotions<span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu promotab">
                                    <li><a href="#" class="ptb" d="a">All Promotions</a></li>
                                </ul>
                            </div>
                            
                            <div class="ptballbox">
                                @forelse($promotion as $promo)
                                    <div class="ptbox all">
                                        <img src="{{ asset('uploads/'.$promo->gambar) ?? '/assets/custom/img/default-promo.png' }}" alt="{{ $promo->title ?? 'Promosi' }}" style="width: 100%; border-radius: 5px 5px 0 0;">
                                        <div class="promotion-title">
                                            <span>{{ $promo->judul ?? 'Judul Promosi' }}</span>
                                            <a href="#" style="cursor: pointer;">Detail</a>
                                        </div>
                                    </div>
                                    <div class="panel-content" style="display: none;">
                                        <div class="panel-body">
                                            {!! $promo->text ?? 'Syarat dan Ketentuan berlaku.' !!}
                                        </div>
                                    </div>
                                @empty
                                    <div style="text-align: center; padding: 30px; color: #fff;">
                                        Belum ada promosi yang aktif saat ini.
                                    </div>
                                @endforelse
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
        @include('frontend.partials.mobile.bottom-nav')
    </div>
    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="slider">
            <section class="marquee">
                <div class="wrapper">
                    <div class="s-a">
                        <div class="marquee__bullhorn">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <marquee scrolldelay="150" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" direction="left">
                            <div style="width: 100000px; transform: translateX(0px);" class="js-marquee-wrapper">
                                <div class="js-marquee" style="margin-right: 0px; float: left;">{{ general()->title }}</div>
                            </div>
                        </marquee>
                    </div>
                </div>
            </section>
        </section>

        <section class="pbox">
            <div class="wrapper">
                <section class="promotion info">
                    
                    <div class="info__left">
                        <ul class="promotab">
                            <li class="active">
                                <a href="#" class="ptb" d="a">All</a>
                            </li>
                        </ul>
                    </div>

                    <div class="info__right">
                        @forelse($promotion as $promo)
                            <div class="ptbox all">
                                <img src="{{ asset('uploads/'.$promo->gambar) ?? '/assets/custom/img/default-promo.png' }}" alt="{{ $promo->title ?? 'Promosi' }}" style="width: 100%; border-radius: 5px 5px 0 0;">
                                <div class="promotion-title">
                                    <span>{{ $promo->judul ?? 'Judul Promosi' }}</span>
                                    <a href="#" style="cursor: pointer;">Detail</a>
                                </div>
                            </div>
                            <div class="panel-content" style="display: none;">
                                <div class="panel-body">
                                    {!! $promo->text ?? 'Syarat dan Ketentuan berlaku.' !!}
                                </div>
                            </div>
                        @empty
                            <div style="text-align: center; padding: 50px; color: #fff; width: 100%;">
                                Belum ada promosi yang aktif saat ini.
                            </div>
                        @endforelse
                    </div>

                </section>
            </div>
        </section>

        <section class="sidebar s-sidebar"></section>
        
        @include('frontend.partials.desktop.footer')
    </div>

@endsection

@push('scripts')
<script type="text/javascript">
window.loadMeIfReady = function() {
    
    // Fitur Buka/Tutup Detail Promosi (Accordion)
    $(document).off("click", ".promotion-title a").on("click", ".promotion-title a", function(e) {
        e.preventDefault();
        // Menutup semua panel yang sedang terbuka agar rapi (Opsional, bisa dihapus jika ingin bisa buka banyak sekaligus)
        // $('.panel-content').slideUp(300); 
        
        // Membuka/menutup panel yang diklik
        $(this).closest(".ptbox").next(".panel-content").slideToggle(300);
        return false;
    });

    // Fitur Dropdown Kategori di Mobile
    $(document).off("click", ".promo_dropown").on("click", ".promo_dropown", function(e) {
        e.preventDefault();
        $(this).toggleClass('open');
        return false;
    });

    // Fitur Klik Kategori Mobile & Desktop (Disembunyikan jika tidak ada kategori spesifik di DB Anda)
    $(document).off('click', '.ptb').on('click', '.ptb', function(e) {
        e.preventDefault();
        let pd = $(this).closest('.promo_dropown');
        if(pd.length) {
            pd.find('> a:first').text($(this).text());
            pd.removeClass('open');
        }
        
        if ($(this).closest('.pbox').find('.info__left').length) {
            $(this).closest('ul').find('li').removeClass('active');
            $(this).parent().addClass('active');
        }
        
        let d = $(this).attr('d');
        if (d == 'a') {
            $('.ptbox').fadeIn(400);
        } else {
            $('.ptbox, .panel-content').hide();
            $('.ptbox.' + d).fadeIn(400);
        }
        return false;
    });

}; // End of loadMeIfReady
</script>
@endpush