@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">

        <div class="inner-page-head">
            @include('front.templates.background-header')
        </div>

        <div class="inner-page account video-message">
            @include('front.templates.background-inner-page')
            <div class="container">
                <div class="inner-page-content">

                    <h1 class="h2 text-center">{{ ShowLabelById(44) }}</h1>
                    <div class="text-center common-text">
                        <p>{{ ShowLabelById(45) }}</p>
                        <p>{{ ShowLabelById(46) }}</p>
                    </div>
                    <div class="create-inner">
                        <iframe id="vdmForm" width="755" height="345" name="myForm"
                                src="{{ str_replace('{videoId}', $order->video_id ?? '', config('services.video_dedmoroz.iframe_demo_url')) }}"
                                frameborder="1" scrolling="no" style=""></iframe>
                    </div>

                    @if($order && $order->basketItem)
                        <div class="text-center common-text mt-3">
                            <p>{!! str_replace('{year}', $order->basketItem->goods_model, ShowLabelById(47)) !!}</p>
                        </div>
                    @endif

                    <h2 class="text-center mt-6">{{ ShowLabelById(19) }}</h2>

                    <form method="POST" action="{{ route('ajax-continue-order') }}" id="continue-order"
                          enctype="multipart/form-data">

                        @csrf
                        <input type="hidden" name="order_id" value="{{ $order->hash_order_id ?? '' }}">
                        <input type="hidden" name="order" value="{{ $order->id ?? '' }}">
                        <input type="hidden" name="final_price" id="final_price" value="">
                        <input type="hidden" name="user_email" value="{{ $order->ordersUsers->email ?? '' }}">
                        <input type="hidden" name="user_phone" value="{{ $order->ordersUsers->phone ?? '' }}">
                        <input type="hidden" name="user_external_id" value="{{ $order->ordersUsers->id ?? '' }}">


                    @if($pay_types && $pay_types->goodsItems->isNotEmpty())
                            <div class="options-list">
                                <ul>
                                    @foreach($pay_types->goodsItems as $one_pay_type)
                                        <li>
                                            <input type="radio" id="{{ $one_pay_type->alias ?? '' }}" class="pay-type"
                                                   name="pay_type"
                                                   {{ $loop->first ? 'checked' : '' }} value="{{ $one_pay_type->alias ?? '' }}"
                                                   data-pay-type-price="{{ $one_pay_type->price ?? '' }}">
                                            <label for="{{ $one_pay_type->alias ?? '' }}">
                                                <span
                                                    class="options-name">{{ $one_pay_type->itemByLang->name ?? '' }}</span>
                                                <span class="options-text">
                                                    {!! $one_pay_type->itemByLang->body ?? '' !!}
                                                </span>
                                                <span class="options-desc">
                                                    <ul>
                                                        <li>
                                                            <img
                                                                src="{{ $loop->first ? asset('front-assets/img/icons/star-silver.svg') : asset('front-assets/img/icons/star.svg') }}"
                                                                alt="Star 1">
                                                            <p>{{ $one_pay_type->itemByLang->page_title ?? '' }}</p>
                                                        </li>
                                                        <li>
                                                            <img
                                                                src="{{ $loop->first ? asset('front-assets/img/icons/star-silver.svg') : asset('front-assets/img/icons/star.svg') }}"
                                                                alt="Star 2">
                                                            <p>{{ $one_pay_type->itemByLang->h1_title ?? '' }}</p>
                                                        </li>
                                                    </ul>
                                                </span>
                                                <span class="options-footer">
                                                    <span class="options-price" data-original-price="{{ $one_pay_type->price ?? 0 }}">
                                                        {{ $one_pay_type->price ?? '' }} {{ ShowLabelById(21) }}
                                                    </span>

                                                    <span
                                                        class="options-info">{{ $one_pay_type->itemByLang->meta_title ?? '' }}</span>
                                                </span>
                                            </label>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="options-promocode">
                            <div class="options-promocode-inner">
                                <label for="options-promocode">{{ShowLabelById(72)}}:</label>
                                <div class="options-promocode-row">
                                    <input type="text" id="options-promocode" name="options-promocode">
                                    <button type="button" class="button button--inversed apply_promo" disabled>{{ShowLabelById(73)}} </button>
                                </div>
                            </div>
                        </div>
                        <div class="options-link" id="to-pay">
                            <button type="submit" class="button prevent-repeated-click" onclick="newOrder(this)"
                                    data-form-id="continue-order">{{ ShowLabelById(20) }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @include('front.templates.background-bottom')

    </div>

@stop
@push('other-scripts')
    <script>
        let currentPrice = 0;
        let currentDiscount = 0;
        let promoApplied = false;
        let orderId = document.querySelector('input[name="order"]').value;

        const promoInput = document.getElementById('options-promocode');
        const applyBtn = document.querySelector('.apply_promo');
        const payTypeRadios = document.querySelectorAll('input[name="pay_type"]');
        const priceElements = document.querySelectorAll('.options-price');
        const finalPriceInput = document.getElementById('final_price');
        const submitBtn = document.querySelector('button[type="submit"]');

        const userEmail = document.querySelector('input[name="user_email"]').value;
        const userPhone = document.querySelector('input[name="user_phone"]').value;
        const userExternalId = document.querySelector('input[name="user_external_id"]').value;


        // Функция для получения текущей выбранной цены
        function getCurrentPrice() {
            const selectedPayType = document.querySelector('input[name="pay_type"]:checked');
            if (!selectedPayType) return 0;

            let price = parseFloat(selectedPayType.dataset.payTypePrice);

            // Применяем скидку если промокод применен
            if (promoApplied && currentDiscount > 0) {
                price = price - (price * currentDiscount / 100);
            }

            return Math.max(0, price);
        }

        function sendTikTokEvent() {
            currentPrice = getCurrentPrice();
            finalPriceInput.value = currentPrice;

            console.log('Sending TikTok Event on button click:', {
                orderId: orderId,
                price: currentPrice,
                discount: currentDiscount,
                promoApplied: promoApplied,
                timestamp: new Date().toISOString()
            });

            fetch('/api/track/tiktok/initiate-checkout', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    content_id: orderId,
                    content_type: 'demo pay',
                    content_name: `Demo pay for order ${orderId}`,
                    value: currentPrice,
                    currency: '{{ShowLabelById(21)}}',
                    url: window.location.href,
                    email: userEmail,
                    phone_number: userPhone,
                    external_id: userExternalId
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log('TikTok event sent successfully');
                })
                .catch(error => {
                    console.error('Error sending TikTok event:', error);
                });
        }

        promoInput.addEventListener('input', function() {
            applyBtn.disabled = !this.value.trim() || promoApplied;
        });

        applyBtn.addEventListener('click', function() {
            if (promoApplied) return;

            const code = promoInput.value.trim();

            if (!code) {
                Notiflix.Notify.failure('{{ShowLabelById(75)}}');
                return;
            }

            console.log('Applying promo code:', code);

            fetch('{{ route('promo.apply') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ code, order_id: orderId })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Notiflix.Notify.success(data.message || '{{ShowLabelById(74)}}');
                        promoApplied = true;
                        currentDiscount = data.discount_percent || 0;
                        applyBtn.disabled = true;

                        console.log('Promo applied successfully. Discount:', currentDiscount + '%');

                        // Обновляем цены на странице
                        priceElements.forEach(el => {
                            const originalPrice = parseFloat(el.dataset.originalPrice);
                            if (!isNaN(originalPrice)) {
                                const newPrice = originalPrice - (originalPrice * currentDiscount / 100);
                                el.textContent = newPrice.toFixed(2) + ' {{ShowLabelById(21)}}';
                            }
                        });

                    } else {
                        Notiflix.Notify.failure(data.message || '{{ShowLabelById(76)}}');
                        console.log('Promo application failed:', data.message);
                    }
                })
                .catch((error) => {
                    Notiflix.Notify.failure('{{ShowLabelById(77)}}');
                    console.error('Promo application error:', error);
                });
        });

        submitBtn.addEventListener('click', function(e) {

            console.log('Submit button clicked. Final price:', getCurrentPrice());

            sendTikTokEvent();

        });

        document.addEventListener('DOMContentLoaded', function() {

            currentPrice = getCurrentPrice();
            finalPriceInput.value = currentPrice;

            console.log('Page loaded. Initial price:', currentPrice);
        });

    </script>
@endpush