@extends('layouts.shop')

@section('title', 'Store')

@section('content')
    <header class="hero" style="pointer-events: none;">
        <div class="w-layout-blockcontainer container w-container" style="pointer-events: none;"><img style="pointer-events: none;" src="/assets/images/hero_badge_svg.svg"
                                                                         width="497" alt=""
                                                                        class="hero_image hero_real"></div>
    </header>
    <section class="shop">
        <div class="w-layout-blockcontainer container container_shop w-container">

            <div class="shop_header">

                <div class="shop_header-info">
                    <h3 class="shop_title">PURCHASE CRYSTALS FOR YOUR ACCOUNT</h3>
                    <p class="shop_paragraph">Crystals are our custom virtual currency that allows you to buy premium
                        ranks, cosmetics and much more.</p>
                </div>

                <div class="shop_header-currency">

                    <div class="select-box">
                        <div class="options-container">
                            @foreach($currencies as $currency)
                                <div class="option">
                                    <input type="radio" class="radio" id="currency{{ $currency->iso }}" name="currency"
                                           value="{{ $currency->iso }}" onchange="changeCurrency('{{ $currency->iso }}')"/>
                                    <label for="currency{{ $currency->iso }}">{{ $currency->iso }}</label>
                                </div>
                            @endforeach

                        </div>

                        <div class="selector-wrapper">
                            <span class=selected>{{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}</span>

                            <svg class="arrow rotated" style="text-align: right" id="drp-arrow2" width="24" height="24"
                                 viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                                 class="transition-all ml-auto rotate-180">
                                <path d="M7 14.5l5-5 5 5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"
                                      stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </div>
                </div>


            </div>

            <div class="w-layout-grid shop_row">
                @foreach($products as $product)
                    <div id="w-node-c6241fe0-c3b8-0365-75a6-921618d4998d-5772d24c" class="shop_card">
                        @if($product->bonus_percentage)
                            <div class="bonus-main">BONUS <span
                                    class="text-span-4">+{{ $product->bonus_percentage }}%</span>!
                            </div>
                        @endif
                        <div class="card_content">
                            <div class="shop_card-purchase">
                                <div class="purchase_text">PURCHASE <span
                                        class="text-span-2">{{ $product->name }}</span></div>
                            </div>
                            <div class="shop_card-img"><img src="{{ $product->getFirstMediaUrl() }}" loading="lazy"
                                                            width="124"
                                                            alt="" class="shop_card-image"></div>
                            <div class="shop_info">
                                <h3 class="shop_card-title">{{ $product->name }}</h3>
                                <p class="shop_card-paragraph">
                                    {!! $product->getDescription() !!}
                                </p>
                            </div>
                        </div>
                        <div class="shop_card-footer">
                            <a href="{{ route('buy.show', $product->slug) }}"
                               class="shop_card-footer_btn w-button btn_active"
                               id="buyBtn{{ $product->id }}"
                            >
                                BUY FOR {{ number_format($product->getCurrenciedPrice(), 2, ',', ' ') }} {{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="shop_emoji-right"><img style="pointer-events: none;" src="/assets/images/shop_emoji.webp" loading="lazy" width="93" alt=""
                                           class="shop_emoji-margin"><img style="pointer-events: none;" src="/assets/images/shop_emoji_darknes.webp"
                                                                          loading="lazy" width="93" alt=""
                                                                          class="shop_emoji-middle"><img
                 style="pointer-events: none;" src="/assets/images/shop_emoji.webp" loading="lazy" width="93" alt="" class="shop_emoji-margin"></div>
        <div class="shop_emoji-left"><img style="pointer-events: none;" src="/assets/images/shop_emoji.webp" loading="lazy" width="93" alt=""
                                          class="shop_emoji-margin"><img style="pointer-events: none;" src="/assets/images/shop_emoji_darknes.webp"
                                                                         loading="lazy" width="93" alt=""
                                                                         class="shop_emoji-middle"><img
                 style="pointer-events: none;" src="/assets/images/shop_emoji.webp" loading="lazy" width="93" alt="" class="shop_emoji-margin"></div>
    </section>

    <style>
    .yt_embed{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn_play{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 125px;
        height: 75px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        transition: background-color 0.2s ease-in-out;
        cursor: pointer;
    }

    .movie_player{
        width: 100%;
        height: 100%;
    }
    </style>
    
    <section class="video">
    <div class="w-layout-blockcontainer container w-container container_shop">
    

    <div class="yt_embed" data-id="dQw4w9WgXcQ">
        <img class="movie_player" style="pointer-events: none;" src="/assets/images/miniatura.webp" style="cursor: pointer" alt="YouTube Video Thumbnail">
        <div class="play-button"></div>
        <a href="#" class="btn_play" style="cursor: pointer;"></a>
        <img style="pointer-events: none;" src="/assets/images/yt-player.svg" alt="play" class="btn_play">
    </div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var videos = document.querySelectorAll('.yt_embed');

    videos.forEach(function (video) {
        video.addEventListener('click', function () {
            var videoId = this.getAttribute('data-id');
            var iframe = document.createElement('iframe');

            iframe.setAttribute('width', '100%');
            iframe.setAttribute('height', '100%');
            iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
            iframe.setAttribute('allowfullscreen', 'allowfullscreen');

            this.innerHTML = ''; // Usuwa placeholder
            this.appendChild(iframe); // Wstawia iframe
        });
    });
});
</script>


</section>


        @endsection

@section('js')
    <script>
        const selectedAll = document.querySelectorAll(".selector-wrapper");

        selectedAll.forEach((selected) => {
            const optionsContainer = selected.previousElementSibling;

            const optionsList = optionsContainer.querySelectorAll(".option");

            selected.addEventListener("click", () => {
                let arrow = selected.parentNode.querySelector(".arrow");

                if (optionsContainer.classList.contains("active")) {
                    optionsContainer.classList.remove("active");

                    arrow.classList.add("rotated");
                } else {
                    let currentActive = document.querySelector(".options-container.active");

                    if (currentActive) {
                        currentActive.classList.remove("active");
                        let anotherArrow = currentActive.parentNode.querySelector(".arrow");

                        anotherArrow.classList.add("rotated");
                    }

                    arrow.classList.remove("rotated");
                    optionsContainer.classList.add("active");
                }
            });

            optionsList.forEach((o) => {
                o.addEventListener("click", () => {
                    selected.querySelector(".selected").innerHTML = o.querySelector(
                        "label"
                    ).innerHTML;
                    optionsContainer.classList.remove("active");

                    let arrow = selected.parentNode.querySelector(".arrow");
                    arrow.classList.add("rotated");
                });
            });
        });

        window.addEventListener("click", function (e) {
            if (e.target.closest(".select-box") === null) {
                closeDropdown();
            }
        });

        function closeDropdown() {
            const selectedAll = document.querySelectorAll(".selector-wrapper");

            selectedAll.forEach((selected) => {
                const optionsContainer = selected.previousElementSibling;
                let arrow = selected.parentNode.querySelector(".arrow");

                optionsContainer.classList.remove("active");
                arrow.classList.add("rotated");
            });
        }


        /* If the user clicks anywhere outside the select box,
        then close all select boxes: */
        document.addEventListener("click", closeAllSelect);

        function changeCurrency(isoCode) {
            $.post('{{ route('currency.update') }}', {
                _token: '{{ csrf_token() }}',
                currency: isoCode,
            }).then(res => {
                res.prices.forEach(price => {
                    $('#buyBtn'+price.id).text(`BUY FOR ${price.price} ${res.iso}`);
                });
            }).catch(err => {
                location.reload();
            });
        }
    </script>
@endsection