@if (isset($packages, $paymentMethods) && $packages->count() > 0 && $paymentMethods->count() > 0)
    <div class="well pb-0">
        <h3>
            <i class="fas fa-certificate icon-color-1"></i>
            {{ t('Premium Listing') }}
        </h3>
        <p>{{ t('premium_plans_hint') }}</p>

        @php
            $packageIdError = isset($errors) && $errors->has('package_id') ? ' is-invalid' : '';
            $selectedPackageId = (int) request()->query('selected_package_id', null);
        @endphp

        <div class="row mb-3 mb-0">
            <table id="packagesTable" class="table table-hover checkboxtable mb-0">
                @foreach ($packages as $key => $package)
                    @php
                        $packageIds = $packages->pluck('id');

                        $checkedPackageId =
                            $selectedPackageId > 0 && $packageIds->contains($selectedPackageId)
                                ? $selectedPackageId
                                : ($currentPackageId > 0 && $packageIds->contains($currentPackageId)
                                    ? $currentPackageId
                                    : optional($packages->first())->id);

                        $badge = '';
                        $packageStatus = '';

                        $isAccountOnly = (bool) $package->is_account_only;
                        $isCurrent = !empty($currentPackageId) && $currentPackageId == $package->id;
                        $isRepost = !empty($is_repost);
                        $hasPricingContext = isset($currentPackagePrice, $currentPaymentIsActive);
                        if ($isAccountOnly) {
                            $badge = '<span class="badge bg-info">Account Type</span>';

                            if ($isCurrent && !$isRepost) {
                                $badge .= ' <span class="badge bg-secondary">' . t('Current') . '</span>';
                            } elseif ($isCurrent && $isRepost) {
                                $badge .= ' <span class="badge bg-secondary">Last Used</span>';
                            }
                        } else {
                            if ($hasPricingContext) {
                                if ($currentPackagePrice > $package->price) {
                                    $sameAccountType = auth()->user()->acctType->post_type_id === $post->post_type_id;

                                    if ($isRepost && $sameAccountType) {
                                        $packageStatus = ' disabled';
                                        $badge = '<span class="badge bg-danger">' . t('Not available') . '</span>';
                                    } elseif ($isRepost) {
                                        $badge = '<span class="badge bg-success">' . t('Upgrade') . '</span>';
                                    } else {
                                        $badge = '<span class="badge bg-warning">Downgrade</span>';
                                    }
                                } elseif ($currentPackagePrice < $package->price && $package->price > 0) {
                                    $badge = '<span class="badge bg-success">' . t('Upgrade') . '</span>';
                                }

                                if ($isCurrent) {
                                    $badge = '<span class="badge bg-secondary">' . t('Current') . '</span>';

                                    if (!$currentPaymentIsActive) {
                                        $badge .= ' <span class="badge bg-warning">' . t('Payment pending') . '</span>';
                                    }

                                    if ($isRepost) {
                                        $badge = '<span class="badge bg-secondary">Last Used</span>';
                                    }
                                }
                            } elseif ($package->price > 0) {
                                $badge = '<span class="badge bg-success">' . t('Upgrade') . '</span>';
                            }
                        }
                    @endphp

                    <tr class="package-row">
                        <td class="text-start align-middle p-3">
                            <div class="form-check">
                                <input class="form-check-input package-selection{{ $packageIdError }}" type="radio"
                                    name="package_id" id="packageId-{{ $package->id }}" value="{{ $package->id }}"
                                    data-name="{{ $package->name }}" data-price="{{ $package->price }}"
                                    {{ $checkedPackageId == $package->id ? 'checked' : '' }} {{ $packageStatus }}>

                                <label class="form-check-label mb-0{{ $packageIdError }}"
                                    for="packageId-{{ $package->id }}" role="button">
                                    <strong title="{!! $package->description_string !!}">
                                        {!! $package->name !!} {!! $badge !!}
                                    </strong>
                                </label>
                            </div>
                        </td>

                        <td>
                            <ul class="mb-0">
                                @foreach ((array) $package->description_array as $option)
                                    <li>* {!! $option !!}</li>
                                @endforeach
                            </ul>
                        </td>

                        <td class="text-end align-middle p-3">
                            <p id="price-{{ $package->id }}" class="mb-0">
                                @if ($package->currency->in_left)
                                    <span class="price-currency">{!! $package->currency->symbol !!}</span>
                                @endif

                                <span class="price-int">{{ $package->price }}</span>

                                @unless ($package->currency->in_left)
                                    <span class="price-currency">{!! $package->currency->symbol !!}</span>
                                @endunless
                            </p>
                        </td>
                    </tr>
                @endforeach

                {{-- PAYMENT METHODS ROW --}}
                <tr>
                    <td class="text-start align-middle p-3">
                        @includeFirst([
                            config('larapen.core.customizedViewPath') . 'post.createOrEdit.inc.payment-methods',
                            'post.createOrEdit.inc.payment-methods',
                        ])
                    </td>
                    <td class="text-end align-middle p-3" colspan="2">
                        <p class="mb-0">
                            <strong>
                                {{ t('Payable Amount') }}:
                                <span class="payable-amount">0</span>
                            </strong>
                        </p>
                    </td>
                </tr>

            </table>
        </div>
    </div>

    <div class="show-payment-options">
        @if (!empty($savedCards['cards']) && count($savedCards['cards']) > 0)
            <div class="payment-option card mb-3" data-target="#savedCards">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Saved Cards</span>
                    <div class="d-flex align-items-center gap-3">
                        <a href="{{ url('account/wallet') }}" class="text-primary small manage-cards-link">
                            Manage Cards
                        </a>
                        <span class="toggle-icon" style="cursor:pointer;">+</span>
                    </div>
                </div>
                <div class="card-body collapse show" id="savedCards">
                    @include('common.saved-card', [
                        'btnText' => 'Pay & List',
                        'recurringPaymentOption' => true,
                    ])
                </div>
            </div>
        @endif
        <div class="payment-option card mb-3" data-target="#newPayment">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Pay with New Card</span>
                <span class="toggle-icon">+</span>
            </div>

            <div class="card-body collapse" id="newPayment">
                @includeFirst([
                    config('larapen.core.customizedViewPath') . 'post.createOrEdit.inc.payment-methods.plugins',
                    'post.createOrEdit.inc.payment-methods.plugins',
                ])

                <div class="row">
                    <div class="col-md-12 text-center mt-4 d-flex justify-content-center gap-2">
                        <button id="submitPostForm" type="button"
                            class="btn btn-success btn-lg d-flex align-items-center">
                            <span class="spinner-border spinner-border-sm me-2" id="btn-loading"
                                style="display:none;"></span>
                            <span class="btn-text">{{ t('Pay') }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

@section('after_styles')
    @parent
    <style>
        .payment-option .card-header {
            cursor: pointer;
            background-color: #f8f9fa;
            font-weight: 600;
            transition: background 0.3s;
        }

        .payment-option .card-header:hover {
            background-color: #e9ecef;
        }

        .payment-option .toggle-icon {
            font-size: 1.25rem;
            transition: transform 0.3s;
        }

        .payment-option.active .toggle-icon {
            transform: rotate(45deg);
        }
    </style>
@endsection
@push('after_scripts_stack')
    <script>
        $(document).ready(function() {

            $('.manage-cards-link').on('click', function(e) {
                e.stopPropagation();
            });

            $('.payment-option .card-header').on('click', function() {
                const $parent = $(this).closest('.payment-option');
                const targetSelector = $parent.data('target');
                const $target = $(targetSelector);

                // Close all
                $('.payment-option .card-body').not($target).slideUp();
                $('.payment-option').not($parent).removeClass('active');
                $('.payment-option .toggle-icon').css('transform', 'rotate(0deg)');

                // Toggle clicked one
                $target.slideToggle();
                $parent.toggleClass('active');

                // Icon rotation
                if ($parent.hasClass('active')) {
                    $parent.find('.toggle-icon').css('transform', 'rotate(45deg)');
                }
            });

            // Rotate initial open section
            $('.payment-option[data-target="#savedCards"] .toggle-icon')
                .css('transform', 'rotate(45deg)');


            /* -----------------------------------------
             * Highlight selected package row
             * ----------------------------------------- */
            function highlightSelectedRow() {
                $('.package-row').removeClass('table-active');
                $('.package-selection:checked').each(function() {
                    $(this).closest('.package-row').addClass('table-active');
                });
            }

            $('.package-selection').on('change', highlightSelectedRow);

            // Apply on load
            highlightSelectedRow();
        });
    </script>
@endpush