@php
    $section_keys = collect($landing_sections ?? [])->pluck('section_key')->all();
@endphp

@if(in_array('admob_income_calculator', $section_keys, true))
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                if (typeof Vue === 'undefined') {
                    return;
                }
                var el = document.querySelector('#admob-calculator-container');
                if (!el) {
                    return;
                }
                new Vue({
                    el: '#admob-calculator-container',
                    data: {
                        showResult: false,
                        monthlyUsers: 50000,
                        selection: {
                            region: '',
                            category: '',
                            device: ''
                        },
                        rates: {
                            books: 0.05,
                            games: 0.12,
                            business: 0.08
                        }
                    },
                    computed: {
                        toPersian: function () {
                            var persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
                            return function (str) {
                                return str.toString().replace(/\d/g, function (d) {
                                    return persianDigits[d];
                                });
                            };
                        },
                        isFormValid: function () {
                            return this.selection.region && this.selection.category && this.selection.device;
                        },
                        formattedRevenue: function () {
                            var revenue = Math.floor(this.monthlyUsers * (this.rates[this.selection.category] || 0.05) * 12);
                            var formatted = revenue.toLocaleString('fa-IR', { useGrouping: true });
                            return formatted.split('');
                        },
                        formattedUsers: function () {
                            return this.toPersian(Number(this.monthlyUsers).toLocaleString());
                        }
                    },
                    methods: {
                        calculate: function () {
                            this.showResult = true;
                        }
                    }
                });
            });
        </script>
    @endpush
@endif

@if(in_array('adsense_income_calculator', $section_keys, true))
    <script src="{{asset('assets/site/vue/index.vue')}}"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                pageViews: 1509702,
                selectedCategory: 0.015,
                selectedLocation: 1.0,
                categories: [{
                    name: 'ورزشی (Sports)',
                    rate: 0.015
                },
                    {
                        name: 'اقتصاد و مالی (Finance)',
                        rate: 0.035
                    },
                    {
                        name: 'تکنولوژی (Tech)',
                        rate: 0.025
                    },
                    {
                        name: 'سرگرمی (Entertainment)',
                        rate: 0.008
                    }
                ],
                locations: [{
                    name: 'آمریکای شمالی و جنوبی',
                    multiplier: 1.0
                },
                    {
                        name: 'اروپا',
                        multiplier: 0.8
                    },
                    {
                        name: 'آسیا و اقیانوسیه',
                        multiplier: 0.5
                    },
                    {
                        name: 'خاورمیانه و آفریقا',
                        multiplier: 0.4
                    }
                ]
            },
            computed: {
                yearlyEarnings() {
                    let monthlyEarnings = this.pageViews * this.selectedCategory * this.selectedLocation;
                    return monthlyEarnings * 12;
                },
                formattedPageViews() {
                    return new Intl.NumberFormat('fa-IR').format(this.pageViews);
                },
                formattedEarnings() {
                    let roundedEarnings = Math.round(this.yearlyEarnings);
                    return new Intl.NumberFormat('fa-IR').format(roundedEarnings);
                }
            }
        });
    </script>
@endif

@if(in_array('audio_player', $section_keys, true))
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const audio = document.getElementById('audio-player');
            const playBtn = document.getElementById('playBtn');
            const volumeSlider = document.getElementById('volumeSlider');
            const likeBtn = document.getElementById('likeBtn');
            const coverImage = document.getElementById('coverImage');

            if (!audio || !playBtn || !volumeSlider || !coverImage) {
                return;
            }

            let isPlaying = false;

            const playIcon = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M22.4 256V89.7c0-68.9 74.6-112 134.2-77.5l144.1 83.2 144.1 83.2c59.7 34.4 59.7 120.6 0 155l-144.1 83.2L156.6 500C97 534.3 22.4 491.3 22.4 422.4z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg>`;
            const pauseIcon = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" x="0" y="0" viewBox="0 0 47.607 47.607" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M17.991 40.976a6.631 6.631 0 0 1-13.262 0V6.631a6.631 6.631 0 0 1 13.262 0v34.345zM42.877 40.976a6.631 6.631 0 0 1-13.262 0V6.631a6.631 6.631 0 0 1 13.262 0v34.345z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg>`;

            playBtn.addEventListener('click', () => {
                if (isPlaying) {
                    audio.pause();
                    playBtn.innerHTML = playIcon;
                    coverImage.classList.remove('playing');
                } else {
                    audio.play();
                    playBtn.innerHTML = pauseIcon;
                    coverImage.classList.add('playing');
                }
                isPlaying = !isPlaying;
            });

            audio.addEventListener('ended', () => {
                isPlaying = false;
                playBtn.innerHTML = playIcon;
                coverImage.classList.remove('playing');
            });

            const updateVolume = () => {
                const value = volumeSlider.value;
                audio.volume = value / 100;
                volumeSlider.style.background = `linear-gradient(to right, #22b573 ${value}%, #333333 ${value}%)`;
            };

            updateVolume();
            volumeSlider.addEventListener('input', updateVolume);

            if (likeBtn) {
                likeBtn.addEventListener('click', function() {
                    this.classList.toggle('active');
                    const svg = this.querySelector('svg');
                    if (!svg) {
                        return;
                    }
                    if (this.classList.contains('active')) {
                        svg.setAttribute('fill', 'var(--theme-green)');
                        svg.setAttribute('stroke', 'var(--theme-green)');
                    } else {
                        svg.setAttribute('fill', 'none');
                        svg.setAttribute('stroke', 'currentColor');
                    }
                });
            }
        });
    </script>
@endif