@php
    $section_content = (array) ($section_content ?? []);
    $plans = (array) ($section_content['plans'] ?? []);
    $contactUrl = route('site.contactUs');
@endphp
@if(count($plans) > 0)
<section>
    @foreach($plans as $plan)
        @php
            $color = $plan['color'] ?? 'gold';
            $modalId = 'subscription-plan-' . ($plan['id'] ?? $loop->index);
            $planTitle = $plan['title'] ?? '';
            $durationLabel = $plan['duration_label'] ?? '';
            $amountFormatted = $plan['amount_formatted'] ?? '';
            $features = (array) ($plan['features'] ?? []);
            $modalFeatures = array_values(array_filter($features, fn ($f) => is_array($f) && trim((string) ($f['title'] ?? '')) !== ''));
            $featureCount = count($modalFeatures);
            $pageLink = ! empty($plan['button_link']) ? $plan['button_link'] : $contactUrl;
            $cardFeatures = array_slice($modalFeatures, 0, 6);
            $planButtons = array_values(array_filter((array) ($plan['buttons'] ?? []), fn ($btn) => is_array($btn) && !empty($btn['text']) && !empty($btn['link'])));
            $planButtonsCount = count($planButtons);
            if (empty($planButtons)) {
                $planButtons = [
                    ['text' => 'تماس جهت خرید', 'link' => $contactUrl, 'class' => $color . '-btn'],
                    ['text' => 'ارجاع به صفحه', 'link' => $pageLink, 'class' => 'btn-dark-gray'],
                ];
                $planButtonsCount = count($planButtons);
            }
        @endphp
        <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content main-radius border-0 overflow-hidden">
                    <div class="modal-header border-0 p-3 bg-white">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <span class="extra-bold font-18 text-black" id="{{ $modalId }}Label">
                                اشتراک <span class="{{ $color }} ps-1">{{ $planTitle }}</span>
                            </span>
                            <div class="text-start mb-3">
                                <span class="extra-bold {{ $color }} font-23 d-flex align-items-center justify-content-end">
                                    {{ $amountFormatted }}
                                    <span class="font-14 light text-black ps-1">تومان</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body p-3 pt-0">
                        <div class="plan-order position-relative border-0 p-0">
                            @if(count($modalFeatures) > 0)
                                <ul class="list-unstyled d-flex gap-3 align-items-start flex-column p-0 m-0">
                                    @foreach($modalFeatures as $feature)
                                        @php $ft = trim((string) ($feature['title'] ?? '')); @endphp
                                        @if($ft !== '')
                                            <li class="font-13 text-black d-flex align-items-center gap-2">
                                                @if(($feature['badge_color'] ?? 'green') === 'red')
                                                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                                                        <g>
                                                            <path fill="#b40c00" d="M256 0C114.836 0 0 114.836 0 256s114.836 256 256 256 256-114.836 256-256S397.164 0 256 0zm0 0" opacity="1" data-original="#f44336" class=""></path>
                                                            <path fill="#fafafa" d="M350.273 320.105c8.34 8.344 8.34 21.825 0 30.168a21.275 21.275 0 0 1-15.086 6.25c-5.46 0-10.921-2.09-15.082-6.25L256 286.164l-64.105 64.11a21.273 21.273 0 0 1-15.083 6.25 21.275 21.275 0 0 1-15.085-6.25c-8.34-8.344-8.34-21.825 0-30.169L225.836 256l-64.11-64.105c-8.34-8.344-8.34-21.825 0-30.168 8.344-8.34 21.825-8.34 30.169 0L256 225.836l64.105-64.11c8.344-8.34 21.825-8.34 30.168 0 8.34 8.344 8.34 21.825 0 30.169L286.164 256zm0 0" opacity="1" data-original="#fafafa"></path>
                                                        </g>
                                                    </svg>
                                                @else
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 100 100">
                                                        <path d="M16.247 16.547c-18.429 18.63-18.329 48.777.3 67.206s48.777 18.329 67.206-.3 18.329-48.777-.3-67.206-48.777-18.329-67.206.3zm56.89 24.339-25.841 26.14c-2.204 2.204-5.81 2.204-8.013 0l-1.001-1-3.005-3.006-8.413-8.313c-2.204-2.203-2.204-5.809 0-8.012s5.809-2.204 8.012 0l8.413 8.313 21.835-22.035c2.203-2.203 5.809-2.203 8.012 0 2.204 2.104 2.204 5.71 0 7.913z" fill="#22b573" />
                                                    </svg>
                                                @endif
                                                {{ $ft }}
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            @endif
                            <p class="p-2 bg-light main-radius font-13 mt-3 lh-lg text-secondary">
                                {{ $planTitle }}
                            </p>
                            <ul class="m-0 d-flex flex-column p-0">
                                <li class="pb-2 border-bottom d-flex justify-content-between">
                                    <span class="font-14 text-black">نوع اشتراک</span>
                                    <span class="bold {{ $color }} font-14">{{ $planTitle }}</span>
                                </li>
                                <li class="py-2 border-bottom d-flex justify-content-between">
                                    <span class="font-14 text-black">مدت پنل</span>
                                    <span class="light-gray font-14">{{ $durationLabel }}</span>
                                </li>
                                <li class="pt-2 d-flex justify-content-between">
                                    <span class="font-14 text-black">تعداد مزایا</span>
                                    <span class="light-gray font-14">{{ $featureCount }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer border-0 p-3 bg-white">
                        <div class="row m-0 w-100 {{ $planButtonsCount === 1 ? 'g-0' : 'gx-2 gy-2' }}">
                            @foreach($planButtons as $button)
                                <div class="{{ $planButtonsCount === 1 ? 'col-12 p-0' : 'col-6 p-0 px-1' }}">
                                    <a class="py-2 font-14 d-flex justify-content-center text-white main-radius {{ $button['class'] ?? 'btn-dark-gray' }} text-decoration-none" href="{{ $button['link'] }}">
                                        {{ $button['text'] }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    <div class="container">
        <div class="row mx-0 mt-5 pt-4 w-100 justify-content-center">
            @foreach($plans as $plan)
                @php
                    $color = $plan['color'] ?? 'gold';
                    $modalId = 'subscription-plan-' . ($plan['id'] ?? $loop->index);
                    $planTitle = $plan['title'] ?? '';
                    $durationLabel = $plan['duration_label'] ?? '';
                    $amountFormatted = $plan['amount_formatted'] ?? '';
                    $features = (array) ($plan['features'] ?? []);
                    $modalFeatures = array_values(array_filter($features, fn ($f) => is_array($f) && trim((string) ($f['title'] ?? '')) !== ''));
                    $cardFeatures = array_slice($modalFeatures, 0, 6);
                    $pageLink = ! empty($plan['button_link']) ? $plan['button_link'] : $contactUrl;
                    $planButtons = array_values(array_filter((array) ($plan['buttons'] ?? []), fn ($btn) => is_array($btn) && !empty($btn['text']) && !empty($btn['link'])));
                    $planButtonsCount = count($planButtons);
                    if (empty($planButtons)) {
                        $planButtons = [
                            ['text' => 'تماس جهت خرید', 'link' => $contactUrl, 'class' => $color . '-btn'],
                            ['text' => 'ارجاع به صفحه', 'link' => $pageLink, 'class' => 'btn-dark-gray'],
                        ];
                        $planButtonsCount = count($planButtons);
                    }
                @endphp
                <div class="col-lg-4 col-sm-6 col-12 p-2">
                    <div class="plan-order {{ $color }}-plan position-relative overflow-hidden p-3 main-radius">
                        <div class="d-flex justify-content-between align-items-center position-relative z-3">
                            <span class="extra-bold font-18 text-black d-flex">
                                اشتراک <span class="{{ $color }} ps-1">{{ $planTitle }}</span>
                            </span>
                            <div class="d-flex gap-2 align-items-center">
                                <button class="font-12 {{ $color }} fw-bold px-2 py-1 border-0 bg-white rounded-pill shadow-sm" type="button" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">
                                    مشاهده جزییات
                                </button>
                                <span class="px-2 py-1 rounded-pill {{ $color }}-lable text-white font-10 semi">
                                    پیشنهادی
                                </span>
                            </div>
                        </div>
                        <span class="light font-13 d-flex light-gray">
                            {{ $durationLabel }}
                        </span>
                        <span class="extra-bold position-relative z-3 d-flex {{ $color }} font-30 align-items-center my-2">
                            {{ $amountFormatted }}
                            <span class="font-14 light text-black ps-1">
                                تومان
                            </span>
                        </span>
                        @if(count($cardFeatures) > 0)
                            <ul class="list-unstyled d-flex gap-3 align-items-start flex-column p-0 m-0">
                                @foreach($cardFeatures as $feature)
                                    @php $ft = trim((string) ($feature['title'] ?? '')); @endphp
                                    @if($ft !== '')
                                        <li class="font-13 text-black">
                                            @if(($feature['badge_color'] ?? 'green') === 'red')
                                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                                                    <g>
                                                        <path fill="#b40c00" d="M256 0C114.836 0 0 114.836 0 256s114.836 256 256 256 256-114.836 256-256S397.164 0 256 0zm0 0" opacity="1" data-original="#f44336" class=""></path>
                                                        <path fill="#fafafa" d="M350.273 320.105c8.34 8.344 8.34 21.825 0 30.168a21.275 21.275 0 0 1-15.086 6.25c-5.46 0-10.921-2.09-15.082-6.25L256 286.164l-64.105 64.11a21.273 21.273 0 0 1-15.083 6.25 21.275 21.275 0 0 1-15.085-6.25c-8.34-8.344-8.34-21.825 0-30.169L225.836 256l-64.11-64.105c-8.34-8.344-8.34-21.825 0-30.168 8.344-8.34 21.825-8.34 30.169 0L256 225.836l64.105-64.11c8.344-8.34 21.825-8.34 30.168 0 8.34 8.344 8.34 21.825 0 30.169L286.164 256zm0 0" opacity="1" data-original="#fafafa"></path>
                                                    </g>
                                                </svg>
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 100 100" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                                                    <g>
                                                        <path d="M16.247 16.547c-18.429 18.63-18.329 48.777.3 67.206s48.777 18.329 67.206-.3 18.329-48.777-.3-67.206-48.777-18.329-67.206.3zm56.89 24.339-25.841 26.14c-2.204 2.204-5.81 2.204-8.013 0l-1.001-1-3.005-3.006-8.413-8.313c-2.204-2.203-2.204-5.809 0-8.012s5.809-2.204 8.012 0l8.413 8.313 21.835-22.035c2.203-2.203 5.809-2.203 8.012 0 2.204 2.104 2.204 5.71 0 7.913z" fill="#22b573" opacity="1" data-original="#000000" class=""></path>
                                                    </g>
                                                </svg>
                                            @endif
                                            {{ $ft }}
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        @endif
                        <div class="row m-0 mt-3 w-100 {{ $planButtonsCount === 1 ? 'g-0' : 'gx-2 gy-2' }}">
                            @foreach($planButtons as $button)
                                <div class="{{ $planButtonsCount === 1 ? 'col-12 p-0' : 'col-6 p-0 px-1' }}">
                                    <a class="first-page-btn-component py-2 font-14 position-relative z-3 d-flex justify-content-center text-white main-radius {{ $button['class'] ?? 'btn-dark-gray' }}" href="{{ $button['link'] }}">
                                        {{ $button['text'] }}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif