@php
    $section_content = (array) ($section_content ?? []);
    $usdRate = (float) \App\Models\Setting::getSetting('currency_usd', 0);
    $aedRate = (float) \App\Models\Setting::getSetting('currency_aed', 0);
    $lirRate = (float) \App\Models\Setting::getSetting('currency_lir', 0);
    $feeWithoutManagement = (float) \App\Models\Setting::getSetting('google_ads_fee_without_management_percent', 0);
    $feeWithManagement = (float) \App\Models\Setting::getSetting('google_ads_fee_with_management_percent', 0);
    $orderUrl = isset($service) ? route('panel.order.create', ['id' => $service->id]) : route('panel.order.create');
    $currencies = [
        ['code' => 'usd', 'setting_key' => 'currency_usd', 'label' => 'دلار آمریکا', 'rate' => $usdRate],
        ['code' => 'aed', 'setting_key' => 'currency_aed', 'label' => 'درهم امارات', 'rate' => $aedRate],
        ['code' => 'lir', 'setting_key' => 'currency_lir', 'label' => 'لیر ترکیه', 'rate' => $lirRate],
    ];
@endphp

<div class="container">
    <div class="px-2">
        <div class="mx-0 my-5 row calculate-back overflow-hidden position-relative align-items-center px-3 py-4 bg-white main-radius shadow-sm w-100">
            <div class="col-md-5 col-12 p-2 text-center">
                <img class="w-lg-100" width="200" src="{{asset('assets/site/img/calculater.png')}}" alt="">
                <span class="d-flex justify-content-center mt-4 font-23 extra-bold mint-green">
                {{ $section_content['title'] ?? 'شارژ حساب گوگل ادز' }}
            </span>
                <span class="d-flex justify-content-center mt-1 medium-gray">
                {{ $section_content['short_description'] ?? 'هر چه چقدر که راحتی اکانتتو شارژ کن' }}
            </span>
                <div class="my-2">
                <span class="font-13 text-black">
                    آخرین بروزرسانی در
                </span>
                    <span class="font-13 light light-gray ps-1">
                    {{ jdate_format('Y/m/d', time()) }}
                </span>
                </div>
                @foreach($currencies as $currency)
                    <div>
                        <span class="bold daek-gray">
                            نرخ {{ $currency['label'] }} به‌روز:
                        </span>
                        <span class="bold mint-green">
                            {{ number_format((float) $currency['rate']) }} تومان
                        </span>
                    </div>
                @endforeach
            </div>
            <div class="col-md-5 mx-auto col-12 p-2">
                <nav class="tabs-services">
                    <div class="nav nav-tabs mb-4 mt-mg-0 mt-4 gap-3 justify-content-center border-0" id="nav-tab" role="tablist">
                        @foreach($currencies as $index => $currency)
                            <button class="nav-link {{ $index === 0 ? 'active' : '' }}"
                                    id="nav-{{ $currency['code'] }}-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#nav-{{ $currency['code'] }}"
                                    type="button"
                                    role="tab"
                                    aria-controls="nav-{{ $currency['code'] }}"
                                    aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                {{ $currency['label'] }}
                            </button>
                        @endforeach
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    @foreach($currencies as $index => $currency)
                        <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                             id="nav-{{ $currency['code'] }}"
                             role="tabpanel"
                             aria-labelledby="nav-{{ $currency['code'] }}-tab"
                             tabindex="0"
                             data-calc-pane
                             data-currency-setting="{{ $currency['setting_key'] }}">
                            <div class="col-md-8 col-12 p-0 mx-auto">
                                <div>
                                    <label class="text-start w-100 font-14 mb-1 dark-gray light">مبلغ شارژ</label>
                                    <div class="position-relative">
                                        <input inputmode="numeric"
                                               placeholder="۱۰۰,۰۰۰"
                                               class="w-100 main-radius border text-center login-input font-13 rounded-buttom-0"
                                               data-calc-input>
                                        <div class="row m-0 w-100">
                                            <div class="col-6 p-0">
                                                <input type="radio"
                                                       class="btn-check"
                                                       name="manage-options-{{ $currency['code'] }}"
                                                       id="manage-unmanaged-{{ $currency['code'] }}"
                                                       value="2"
                                                       autocomplete="off"
                                                       checked
                                                       data-calc-manage>
                                                <label class="btn btn-secondary w-100 toogle--1 first-page-btn-component" for="manage-unmanaged-{{ $currency['code'] }}">
                                                    بدون مدیریت
                                                </label>
                                            </div>
                                            <div class="col-6 p-0">
                                                <input type="radio"
                                                       class="btn-check"
                                                       name="manage-options-{{ $currency['code'] }}"
                                                       id="manage-managed-{{ $currency['code'] }}"
                                                       value="1"
                                                       autocomplete="off"
                                                       data-calc-manage>
                                                <label id="lable-for-growth" class="btn btn-secondary w-100 toogle--2 first-page-btn-component" for="manage-managed-{{ $currency['code'] }}">
                                                    با مدیریت
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <span class="d-flex justify-content-center bold font-12 mt-1 d-none" data-calc-base-container>
                                    <span class="mint-green pe-1" data-calc-base>۰</span> تومان قیمت پایه
                                </span>
                                <div class="font-23 bold d-flex justify-content-center gap-1 mt-2 align-items-center mint-green">
                                    <span data-calc-final>۰</span>
                                    <span class="light font-15 dark-gray">تومان</span>
                                </div>
                                <span class="font-12 justify-content-center light-gray justify-content-center d-flex d-none" data-calc-percent-container>
                                    + <span data-calc-percent class="px-1">{{ number_format($feeWithoutManagement, 0) }}</span> درصد کارمزد
                                </span>
                                <a class="first-page-btn-component align-items-center gap-1 text-white main-radius btn-mint-green d-flex max-w mx-auto mt-3"
                                   href="{{ $orderUrl }}"
                                   data-calc-order-link
                                   data-order-base-url="{{ $orderUrl }}"
                                   data-currency-setting="{{ $currency['setting_key'] }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="19" height="19" x="0" y="0" viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                                        <g>
                                            <path d="M201.498 512.002c-1.992 0-4.008-.398-5.934-1.229a15 15 0 0 1-8.617-17.39l50.724-204.178h-136.67a15 15 0 0 1-13.99-20.412L187.273 9.589A14.999 14.999 0 0 1 201.262 0h137.961c5.069 0 9.795 2.56 12.565 6.806a15.002 15.002 0 0 1 1.162 14.242l-59.369 134.76h117.42a15 15 0 0 1 12.621 23.106L214.126 505.106a15 15 0 0 1-12.628 6.896z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path>
                                        </g>
                                    </svg>
                                    شارژ حساب
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rates = {
            currency_usd: {{ $usdRate }},
            currency_aed: {{ $aedRate }},
            currency_lir: {{ $lirRate }},
        };
        const feeMap = {
            managed: {{ $feeWithManagement }},
            unmanaged: {{ $feeWithoutManagement }},
        };

        const toEnglishDigits = (value) => String(value || '')
            .replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d))
            .replace(/[^\d.]/g, '');

        const formatFa = (value) => Number(value || 0).toLocaleString('fa-IR');

        const updatePane = (pane) => {
            const input = pane.querySelector('[data-calc-input]');
            const checkedManage = pane.querySelector('[data-calc-manage]:checked');
            const finalNode = pane.querySelector('[data-calc-final]');
            const baseContainer = pane.querySelector('[data-calc-base-container]');
            const baseNode = pane.querySelector('[data-calc-base]');
            const percentNode = pane.querySelector('[data-calc-percent]');
            const percentContainer = pane.querySelector('[data-calc-percent-container]');
            const orderLink = pane.querySelector('[data-calc-order-link]');
            const currencySetting = pane.getAttribute('data-currency-setting');
            const rate = Number(rates[currencySetting] || 0);
            const amount = Number(toEnglishDigits(input.value || 0)) || 0;
            const isManaged = checkedManage && checkedManage.value === '1';
            const feePercent = isManaged ? Number(feeMap.managed || 0) : Number(feeMap.unmanaged || 0);
            const base = amount * rate; // قیمت پایه قبل از کارمزد
            const benefit = base * (feePercent / 100);
            const total = base + benefit;

            finalNode.textContent = formatFa(total);

            if (isManaged) {
                if (baseContainer) baseContainer.classList.remove('d-none');
                if (percentContainer) percentContainer.classList.remove('d-none');
                if (baseNode) baseNode.textContent = formatFa(base);
            } else {
                if (baseContainer) baseContainer.classList.add('d-none');
                if (percentContainer) percentContainer.classList.add('d-none');
            }
            percentNode.textContent = formatFa(feePercent);

            if (orderLink) {
                const baseUrl = orderLink.getAttribute('data-order-base-url') || '{{ $orderUrl }}';
                const params = new URLSearchParams();
                params.set('currency', currencySetting);
                params.set('cash', String(amount));
                params.set('manage_type', isManaged ? '1' : '2');
                orderLink.href = `${baseUrl}?${params.toString()}`;
            }
        };

        const resetPane = (pane) => {
            const input = pane.querySelector('[data-calc-input]');
            const unmanaged = pane.querySelector('[data-calc-manage][value="2"]');
            if (input) input.value = '';
            if (unmanaged) unmanaged.checked = true;
            updatePane(pane);
        };

        document.querySelectorAll('[data-calc-pane]').forEach((pane) => {
            const input = pane.querySelector('[data-calc-input]');
            const manageOptions = pane.querySelectorAll('[data-calc-manage]');

            if (input) {
                input.addEventListener('input', function () {
                    this.value = formatFa(toEnglishDigits(this.value));
                    updatePane(pane);
                });
            }
            manageOptions.forEach((radio) => {
                radio.addEventListener('change', () => updatePane(pane));
            });
            updatePane(pane);
        });

        document.querySelectorAll('#nav-tab [data-bs-toggle="tab"]').forEach((tabBtn) => {
            tabBtn.addEventListener('shown.bs.tab', function (event) {
                const targetSelector = event.target.getAttribute('data-bs-target');
                const pane = targetSelector ? document.querySelector(targetSelector) : null;
                if (pane) {
                    resetPane(pane);
                }
            });
        });
    });
</script>