@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' : '';
        @endphp

        <div class="row mb-3 mb-0">
            <table id="packagesTable" class="table table-hover checkboxtable mb-0">
                @foreach ($packages as $package)
                    @php
                        $packageStatus = '';
                        $badge = '';
                        if ($package->is_account_only) {
                            $badge = ' <span class="badge bg-info">Account Type</span>';

                            if (!empty($currentPackageId) && $currentPackageId == $package->id && !$is_repost) {
                                $badge .= ' <span class="badge bg-secondary">' . t('Current') . '</span>';
                            }
                            if(!empty($currentPackageId) && $currentPackageId == $package->id && $is_repost){
                                $badge .= ' <span class="badge bg-secondary">Last Used </span>';
                            }
                        } else {
                            if (isset($currentPackageId, $currentPackagePrice, $currentPaymentIsActive)) {
                                if ($currentPackagePrice > $package->price) {
                                    $badge = ' <span class="badge bg-warning">' . 'Downgrade' . '</span>';
                                } elseif ($currentPackagePrice < $package->price) {
                                    if ($package->price > 0) {
                                        $badge = ' <span class="badge bg-success">' . t('Upgrade') . '</span>';
                                    }
                                }

                                if ($currentPackageId == $package->id) {
                                    $badge = ' <span class="badge bg-secondary">' . t('Current') . '</span>';
                                    if ($currentPaymentIsActive == 0) {
                                        $badge .= ' <span class="badge bg-warning">' . t('Payment pending') . '</span>';
                                    }
                                    if (!empty($is_repost) && $is_repost == true) {
                                        $badge = ' <span class="badge bg-secondary">Last Used </span>';
                                    }
                                }
                            } else {
                                if ($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 }}"
                                    {{ old('package_id', $currentPackageId ?? 0) == $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>
                                @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>

                                @if (!$package->currency->in_left)
                                    <span class="price-currency">{!! $package->currency->symbol !!}</span>
                                @endif
                            </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">
        <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>

        <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