@extends('layouts.shop')

@section('title', $product->name)

@section('content')
    <section class="buy">
        <div class="w-layout-blockcontainer container container_buy w-container">
            <div class="buy_card">
                @if($product->bonus_percentage)
                    <div class="bonus_buy">
                        <div class="bonus">BONUS <span class="text-span-4">+{{ $product->bonus_percentage }}%</span>!
                        </div>
                    </div>
                @endif
                <h5 class="buy_subheading">TYPE OF PURCHASE:</h5>
                <h2 class="buy_title">{{ $product->name }}</h2>
                <div class="buy_subtitle">The total cost of the purchase is
                    {{ number_format($product->getCurrenciedPrice(), 2, ',', ' ') }}
                    {{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}
                    (including taxes).
                </div>
                <div class="input">
                    <div class="floating-label-input">
                        <input class="input-text" type="text" id="nick" placeholder="nick" autocomplete="off" onchange="changeNick()">
                        <label for="nick">Enter your username</label>
                    </div>
                    <span style="color:red;margin-left: 1px;display: none;" id="invalidNickAlert">Provided username is invalid.</span>
                </div>


                <div class="floating-label-input">
                    <input class="input-text" type="email" id="email" placeholder="email" autocomplete="off" onchange="changeEmail()">
                    <label for="email">Enter your e-mail</label>
                </div>
                <span style="color:red;margin-left: 1px;display: none;" id="invalidEmailAlert">Provided e-mail address is invalid.</span>

                    <div class="buy_block">
                    <button type="button" id="openModalBtn" style="display: none;">
                        Otwieranie modala
                    </button>
                    <!-- btn_active dodawaj jak mozna juz kliknać -->
                    <button class="shop_card-footer_btn w-button buy-button">BUY FOR
                        {{ number_format($product->getCurrenciedPrice(), 2, ',', ' ') }}
                        {{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}
                    </button>
                </div>

                <div id="modal" class="modal">
                    <div class="modal-content">

                        <img style="pointer-events: none;" src="/assets/images/modal.svg" alt="not">
                        <h5 id="modalTitle">THE PROVIDED USERNAME IS NOT REGISTERED ON THE SERVER.</h5>
                        <p id="modalText">To continue with the purchase, the account must be registered.</p>

                        <button class="close-btn">OKAY I UNDERSTAND</button>
                    </div>
                </div>


                <div class="buy_methods">Bank Transfer | Paysafecard | PayPal</div>
                <div class="other_offer">
                    @foreach($products as $otherProduct)
                        @if($otherProduct->id !== $product->id)
                            @if($otherProduct->bonus_percentage)
                                <div class="offer_block-bonus"
                                     onclick="location.href='{{ route('buy.show', $otherProduct->slug) }}'">
                                    <div data-w-id="6521f827-c31c-dfca-d0e5-42e35fe92fd0" class="offer_block">
                                        <h3 class="offer_block-title">{{ $otherProduct->name }}</h3>
                                        <div class="offer_blobk-info"
                                        >BUY FOR:
                                            <span class="text-span-6">
                                                {{ number_format($otherProduct->getCurrenciedPrice(), 2, ',', ' ') }}
                                                {{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="bonus_trans">BONUS <span class="text-span-4">+{{ $otherProduct->bonus_percentage }}%</span>!
                                    </div>
                                </div>
                            @else
                                <div class="offer_block"
                                     onclick="location.href='{{ route('buy.show', $otherProduct->slug) }}'">
                                    <h3 class="offer_block-title">{{ $otherProduct->name }}</h3>
                                    <div class="offer_blobk-info">BUY FOR: <span
                                            class="text-span-6">{{ number_format($otherProduct->getCurrenciedPrice(), 2, ',', ' ') }}</span><span
                                            class="text-span-6"> {{ \App\Helpers\CurrencyHelper::getCurrentCurrency() }}</span>
                                    </div>
                                </div>
                            @endif
                        @endif
                    @endforeach
                </div>
                <div class="buy_account">Don't have an account on the server?<br>
                    <span class="buy_account-span" id="joinLink" onclick="copyToClipboard('HYPEMC.NET')"
                          style="cursor:pointer;">JOIN ON: HYPEMC.NET</span>
                </div>

            </div>
        </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>
        <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>
    </section>

    <input type="hidden" id="validNick" value="n">
    <input type="hidden" id="validEmail" value="n">
@endsection

@section('js')
    <script>
        document.addEventListener('click', closeMenuOnClickOutside)
        // modal

        document.addEventListener('DOMContentLoaded', () => {
            const openModalBtn = document.getElementById('openModalBtn');
            const modal = document.getElementById('modal');
            const closeBtn = document.querySelector('.close-btn');

            openModalBtn.addEventListener('click', () => {
                modal.style.display = 'flex'; // Show the modal
                setTimeout(() => {
                    modal.classList.add('show'); // Trigger the animation
                }, 10); // Small timeout to ensure the initial display is applied
            });

            closeBtn.addEventListener('click', () => {
                modal.classList.remove('show');
                setTimeout(() => {
                    modal.style.display = 'none'; // Hide the modal after animation
                }, 200); // Timeout matches the transition duration in CSS
            });

            window.addEventListener('click', (event) => {
                if (event.target === modal) {
                    modal.classList.remove('show');
                    setTimeout(() => {
                        modal.style.display = 'none';
                    }, 200);
                }
            });
        });


        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function () {
            }, function (err) {
                console.error('Async: Could not copy text: ', err);
            });
        }

        function changeNick() {
            const nick = $('#nick').val();

            const nickRegex = /^[a-zA-Z0-9_]{3,16}$/;

            if (!nick.match(nickRegex)) {
                $('#validNick').val('n');
                checkValidation();
                return $('#invalidNickAlert').show();
            }

            $('#invalidNickAlert').hide();
            $('#validNick').val('y');
            checkValidation();
        }

        function changeEmail() {
            const email = $('#email').val();

            const emailRegex = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;

            if (!email.toLowerCase().match(emailRegex)) {
                $('#validEmail').val('n');
                checkValidation();
                return $('#invalidEmailAlert').show();
            }

            $('#invalidEmailAlert').hide();
            $('#validEmail').val('y');

            checkValidation();
        }

        function checkValidation() {
            const nickValid = $('#validNick').val() === 'y';
            const emailValid = $('#validEmail').val() === 'y';

            if(nickValid && emailValid) {
                $('.buy-button').addClass('btn_active');
            }
            else {
                $('.buy-button').removeClass('btn_active');
            }
        }

        $('.buy-button').click(function () {
            if(!$(this).hasClass('btn_active')) {
                changeNick();
                changeEmail();
                return;
            }


            $(this).removeClass('btn_active');
            $(this).text('PLEASE WAIT...');

            $.post('', {
               _token: '{{ csrf_token() }}',
               nick: $('#nick').val(),
               email: $('#email').val(),
            }).then(res => {
                location.href = res.redirectUrl;
            }).catch(err => {
                if(err.status === 422) {
                    changeEmail();
                    changeNick();
                    $('.buy-button').text('TRY AGAIN');
                    return;
                }
                $('#openModalBtn').click();
                $('#modalTitle').text(err.responseJSON.title);
                $('#modalText').text(err.responseJSON.text);

                $('.buy-button').text('TRY AGAIN');
                $(this).addClass('btn_active');
            });
        });
    </script>
@endsection