@php
    $section_content = (array) ($section_content ?? []);
    $plans_by_currency = (array) ($section_content['plans_by_currency'] ?? []);
    $currency_meta = [
        'usd' => ['label' => 'پلن دلار آمریکا', 'code' => 'USD', 'buy_text' => 'خرید پلن دلار', 'setting_key' => 'currency_usd'],
        'aed' => ['label' => 'پلن درهم امارات', 'code' => 'AED', 'buy_text' => 'خرید پلن درهم', 'setting_key' => 'currency_aed'],
        'lir' => ['label' => 'پلن لیر ترکیه', 'code' => 'TRY', 'buy_text' => 'خرید پلن لیر', 'setting_key' => 'currency_lir'],
    ];
    $currency_order = ['usd', 'aed', 'lir'];
    $order_url = isset($service) ? route('panel.order.create', ['id' => $service->id]) : route('panel.order.create');
@endphp

<div class="container">
    <div class="plans">
        @if(!empty($section_content['title']) || !empty($section_content['short_description']))
            <div class="px-2">
                @if(!empty($section_content['title']))
                    <p class="font-23 bold dark-gray text-center pb-3 mt-lg-5 mt-4 pt-5 mb-2">
                        {{ $section_content['title'] }}
                    </p>
                @endif
                @if(!empty($section_content['short_description']))
                    <p class="mb-0 mt-2 font-14 light light-gray text-center">
                        {{ $section_content['short_description'] }}
                    </p>
                @endif
            </div>
        @endif

        <div class="d-md-block d-none px-2 mb-4 mt-mg-0 mt-4">
            <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
                <nav class="tabs-services overflow-auto">
                    <div class="nav nav-tabs gap-3 justify-content-center border-0" id="nav-tab" role="tablist">
                        @foreach($currency_order as $index => $currency)
                            <button class="nav-link {{ $index === 0 ? 'active' : '' }}"
                                    id="nav-{{ $currency }}-tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#nav-{{ $currency }}2"
                                    type="button"
                                    role="tab"
                                    aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                {{ $currency_meta[$currency]['label'] }}
                            </button>
                        @endforeach
                    </div>
                </nav>

                <div class="d-flex position-relative z-3 justify-content-center gap-2">
                    <input type="radio" class="btn-check" name="plans-management-mode-desktop" id="plans-with-management-desktop" autocomplete="off">
                    <label class="btn btn-secondary lable-tag" for="plans-with-management-desktop">با مدیریت</label>
                    <input type="radio" class="btn-check" name="plans-management-mode-desktop" id="plans-without-management-desktop" autocomplete="off" checked>
                    <label class="btn btn-secondary lable-tag" for="plans-without-management-desktop">بدون مدیریت</label>
                </div>
            </div>
        </div>

        <div class="tab-content d-md-block d-none" id="nav-tabContent">
            @foreach($currency_order as $index => $currency)
                @php
                    $plans = (array) ($plans_by_currency[$currency] ?? []);
                @endphp
                <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                     id="nav-{{ $currency }}2"
                     role="tabpanel"
                     aria-labelledby="nav-{{ $currency }}-tab">
                    <div class="row row-cols-lg-4 row-cols-sm-3 row-cols-2 justify-content-center m-0 w-100">
                        @forelse($plans as $plan)
                            <div class="col p-2">
                                <div class="bg-white card-sections position-relative overflow-hidden shadow-sm main-radius p-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="absolute z-3 bg-dark-gray bold max-w text-white">
                                            {{ $plan['charge_amount'] ?? '۰' }}{{ $currency_meta[$currency]['code'] }}
                                        </div>
                                        <div>
                                            <span class="font-11 light-gray d-flex justify-content-end">
                                                <span data-plan-fee
                                                      data-fee-with="{{ $plan['fee_with_management'] ?? '۰' }}"
                                                      data-fee-without="{{ $plan['fee_without_management'] ?? '۰' }}">
                                                    {{ $plan['fee_without_management'] ?? '۰' }}
                                                </span>
                                                ٪ کارمزد شارژ
                                            </span>
                                            <span class="font-11 text-black d-flex bold justify-content-end">
                                                <span class="font-11 mint-green d-flex pe-1">
                                                    {{ $plan['base_toman'] ?? '۰' }} تومان
                                                </span>
                                                :{{ $currency_meta[$currency]['code'] }}
                                            </span>
                                        </div>
                                    </div>
                                    <span class="font-20 extra-bold position-relative z-3 d-flex mint-green justify-content-center mt-3 align-items-center">
                                        <span data-plan-final
                                              data-final-with="{{ $plan['final_toman_with_management'] ?? '۰' }}"
                                              data-final-without="{{ $plan['final_toman_without_management'] ?? '۰' }}">
                                            {{ $plan['final_toman_without_management'] ?? '۰' }}
                                        </span>
                                        <span class="font-14 light text-black ps-1">تومان</span>
                                    </span>
                                    <a class="first-page-btn-component position-relative z-3 d-flex justify-content-center text-white main-radius btn-dark-gray"
                                       href="{{ $order_url }}"
                                       data-plan-buy-link
                                       data-order-base-url="{{ $order_url }}"
                                       data-currency="{{ $currency_meta[$currency]['setting_key'] }}"
                                       data-charge-amount="{{ $plan['charge_amount_raw'] ?? 0 }}">
                                        {{ $currency_meta[$currency]['buy_text'] }}
                                    </a>
                                </div>
                            </div>
                        @empty
                            <div class="col p-2">
                                <div class="bg-white card-sections position-relative overflow-hidden shadow-sm main-radius p-2 text-center font-13 light-gray">
                                    پلنی برای این ارز ثبت نشده است.
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-md-none d-block px-2 mb-3">
            <div class="d-flex position-relative z-3 justify-content-center gap-2">
                <input type="radio" class="btn-check" name="plans-management-mode-mobile" id="plans-with-management-mobile" autocomplete="off">
                <label class="btn btn-secondary lable-tag" for="plans-with-management-mobile">با مدیریت</label>
                <input type="radio" class="btn-check" name="plans-management-mode-mobile" id="plans-without-management-mobile" autocomplete="off" checked>
                <label class="btn btn-secondary lable-tag" for="plans-without-management-mobile">بدون مدیریت</label>
            </div>
        </div>

        <div class="accordion accordion-faq px-2 d-md-none d-block" id="accordionOnlineShop">
            @foreach($currency_order as $index => $currency)
                @php
                    $plans = (array) ($plans_by_currency[$currency] ?? []);
                    $collapse_id = 'collapse-' . $currency;
                    $heading_id = 'heading-' . $currency;
                @endphp
                <div class="accordion-item mb-2">
                    <h3 class="accordion-header" id="{{ $heading_id }}">
                        <button class="accordion-button p-3 font-14 dark-gray {{ $index === 0 ? '' : 'collapsed' }}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#{{ $collapse_id }}"
                                aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-controls="{{ $collapse_id }}">
                            <div class="in">{{ $currency_meta[$currency]['label'] }}</div>
                        </button>
                    </h3>
                    <div id="{{ $collapse_id }}"
                         class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                         aria-labelledby="{{ $heading_id }}"
                         data-bs-parent="#accordionOnlineShop">
                        <div class="accordion-body p-2 pb-0 font-14 light-gray">
                            <div class="row row-cols-1 justify-content-center m-0 w-100">
                                @forelse($plans as $plan)
                                    <div class="col mb-2 p-0">
                                        <div class="bg-white card-sections position-relative overflow-hidden border main-radius p-2">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="absolute z-3 bg-dark-gray bold max-w text-white">
                                                    {{ $plan['charge_amount'] ?? '۰' }}{{ $currency_meta[$currency]['code'] }}
                                                </div>
                                                <div>
                                                    <span class="font-11 light-gray d-flex justify-content-end">
                                                        <span data-plan-fee
                                                              data-fee-with="{{ $plan['fee_with_management'] ?? '۰' }}"
                                                              data-fee-without="{{ $plan['fee_without_management'] ?? '۰' }}">
                                                            {{ $plan['fee_without_management'] ?? '۰' }}
                                                        </span>
                                                        ٪ کارمزد شارژ
                                                    </span>
                                                    <span class="font-11 text-black d-flex bold justify-content-end">
                                                        <span class="font-11 mint-green d-flex pe-1">
                                                            {{ $plan['base_toman'] ?? '۰' }} تومان
                                                        </span>
                                                        :{{ $currency_meta[$currency]['code'] }}
                                                    </span>
                                                </div>
                                            </div>
                                            <span class="font-20 extra-bold position-relative z-3 d-flex mint-green justify-content-center mt-3 align-items-center">
                                                <span data-plan-final
                                                      data-final-with="{{ $plan['final_toman_with_management'] ?? '۰' }}"
                                                      data-final-without="{{ $plan['final_toman_without_management'] ?? '۰' }}">
                                                    {{ $plan['final_toman_without_management'] ?? '۰' }}
                                                </span>
                                                <span class="font-14 light text-black ps-1">تومان</span>
                                            </span>
                                            <a class="first-page-btn-component position-relative z-3 d-flex justify-content-center text-white main-radius btn-dark-gray"
                                               href="{{ $order_url }}"
                                               data-plan-buy-link
                                               data-order-base-url="{{ $order_url }}"
                                               data-currency="{{ $currency_meta[$currency]['setting_key'] }}"
                                               data-charge-amount="{{ $plan['charge_amount_raw'] ?? 0 }}">
                                                {{ $currency_meta[$currency]['buy_text'] }}
                                            </a>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col mb-2 p-0">
                                        <div class="bg-white card-sections position-relative overflow-hidden border main-radius p-2 text-center font-13 light-gray">
                                            پلنی برای این ارز ثبت نشده است.
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const desktopWith = document.getElementById('plans-with-management-desktop');
        const desktopWithout = document.getElementById('plans-without-management-desktop');
        const mobileWith = document.getElementById('plans-with-management-mobile');
        const mobileWithout = document.getElementById('plans-without-management-mobile');

        const feeNodes = document.querySelectorAll('[data-plan-fee]');
        const finalNodes = document.querySelectorAll('[data-plan-final]');
        const buyLinks = document.querySelectorAll('[data-plan-buy-link]');

        const applyMode = (mode) => {
            feeNodes.forEach((node) => {
                node.textContent = mode === 'with'
                    ? (node.getAttribute('data-fee-with') || '۰')
                    : (node.getAttribute('data-fee-without') || '۰');
            });

            finalNodes.forEach((node) => {
                node.textContent = mode === 'with'
                    ? (node.getAttribute('data-final-with') || '۰')
                    : (node.getAttribute('data-final-without') || '۰');
            });

            buyLinks.forEach((link) => {
                const baseUrl = link.getAttribute('data-order-base-url') || '';
                const currency = link.getAttribute('data-currency') || '';
                const chargeAmount = link.getAttribute('data-charge-amount') || '';
                if (!baseUrl || !currency || !chargeAmount) {
                    return;
                }

                const params = new URLSearchParams();
                params.set('currency', currency);
                params.set('cash', String(chargeAmount));
                params.set('manage_type', mode === 'with' ? '1' : '2');
                link.href = `${baseUrl}?${params.toString()}`;
            });

            if (desktopWith && desktopWithout) {
                desktopWith.checked = mode === 'with';
                desktopWithout.checked = mode === 'without';
            }
            if (mobileWith && mobileWithout) {
                mobileWith.checked = mode === 'with';
                mobileWithout.checked = mode === 'without';
            }
        };

        desktopWith && desktopWith.addEventListener('change', function () {
            if (this.checked) applyMode('with');
        });
        desktopWithout && desktopWithout.addEventListener('change', function () {
            if (this.checked) applyMode('without');
        });
        mobileWith && mobileWith.addEventListener('change', function () {
            if (this.checked) applyMode('with');
        });
        mobileWithout && mobileWithout.addEventListener('change', function () {
            if (this.checked) applyMode('without');
        });

        applyMode('without');
    });
</script>