@extends('frontend.layouts.main')
@section('content')
    <div class="newsInfo" id="newsInfo">
        <i class="icon-speaker"></i>
        <marquee class="marquee"> SELAMAT DATANG !!! DI {{ general()->title }} SITUS GAME SLOT ONLINE TERLENGKAP DAN
            TERPERCAYA
            SEJAGAD RAYA INDONESIA</marquee>
        <i class="icon-navigate-next"></i>
    </div>

    <div class="main-header-title">
        <h3>Promosi</h3>
    </div>

    <div class="promotions-container">
        <ul class="promotions-category" id="promotions-category">
            <li><a class="btn btn-grey active" href="#" target="all">Semua</a></li>
        </ul>
        @foreach ($promotion as $promo)
            <div class="promotions-list">
                <div class="promotions-wrap" data-wrap="outer_wrap">
                    <div class="promotion-title">
                        <a target="_blank" href="{{ route('promotiond', $promo->slug) }}">
                            <img src="{{ env('AWS_URL') }}{{ $promo->gambar }}" alt="{{ $promo->judul }}">
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <script>
        $(document).ready(function() {
            init_promotion();

            function init_promotion() {
                // Menu
                $("#promotions-category a").on("click", function(e) {
                    e.preventDefault();

                    var _this = $(this);
                    var target = _this.attr("target");

                    // set active
                    $("#promotions-category a.active").removeClass("active");
                    _this.addClass("active");

                    // show promotion based on selected menu
                    if (target == "all") {
                        $(".promotions-list").show();
                    } else {
                        $(".promotions-list").hide();
                        $("[data-wrap=" + target + "]").show();
                    }
                });

                // Show and hide detail of promotion
                // 			$(".promotion-title").on("click", function() {
                // 				$(this).next(".promotions-info").show();
                // 			});

                // 			// Close the detail of promotion
                // 			$(".btn-close").on("click", function(e) {
                // 				e.preventDefault();
                // 				$(this).closest(".promotions-info").hide();
                // 			});
            }
        });
    </script>
@endsection


@section('desktop')
    <div class="middle">
        <div class="container">
            <div>
                <h4 class="title">Promosi</h4>
            </div>

            <div id="PromotionPanel">
                <ul id="PromotionCategory" class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#" target="all" data-toggle="tab" class="nav-link active">Semua</a>
                    </li>
                </ul>
                @foreach ($promotion as $promo)
                <div class="promotion_group">
                    <div class="wrap" data-wrap="outer_wrap">
                        <div class="title_wrap">
                            <img src="{{ env('AWS_URL') }}{{ $promo->gambar }}" alt="{{ $promo->judul }}">
                            <ul class="liveitem">
                                <li><a target="_blank" href="{{ route('promotiond', $promo->slug) }}">Lihat detail</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Menu
            $("#PromotionCategory a").on("click", function(e) {
                e.preventDefault();

                var _this = $(this);
                var target = _this.attr("target");

                // set active
                $("#PromotionCategory a.active").removeClass("active");
                _this.addClass("active");

                // show promotion based on selected menu
                if (target == "all") {
                    $(".promotion_group").show();
                } else {
                    $(".promotion_group").hide();
                    $("[data-wrap=" + target + "]").show();
                }
            });

            // Show and hide detail of promotion
            // 		$(".title_wrap, .liveitem a").on("click", function(e) {
            // 			e.preventDefault();
            // 			$(this).closest(".wrap").next(".info_wrap").show();
            // 		});

            // 		// Close the detail of promotion
            // 		$(".btn_close").on("click", function(e) {
            // 			e.preventDefault();
            // 			$(this).closest(".info_wrap").hide();
            // 		});
        });
    </script>
@endsection