@extends('layouts.main')

@section('title')
    {{ __('Packages') }}
@endsection

@section('page-title')
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h4>@yield('title')</h4>

            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">

            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="section">
        <div class="row">
            @if (has_permissions('create', 'package'))
                    <div class="col-12">
                        <div class="card">

                            <div class="card">
                                {!! Form::open(['route' => 'package.store', 'data-parsley-validate', 'class' => 'create-form', 'data-success-function' => "formSuccessFunction"]) !!}
                                <div class="card-body">
                                    <div class="row ">
                                        {{-- Package Name --}}
                                        <div class="col-md-6 col-lg-4 form-group mandatory">
                                            {{ Form::label('name', __('Package Name'), ['class' => 'form-label']) }}
                                            {{ Form::text('name', '', [
                    'class' => 'form-control ',
                    'placeholder' => trans('Package Name'),
                    'data-parsley-required' => 'true',
                    'id' => 'name',
                ]) }}
                                        </div>

                                        {{-- Duration (Hidden - Fixed 30 days) --}}
                                        <input type="hidden" name="duration" id="duration" value="30">

                                        {{-- Package Type (Hidden - forced to Paid) --}}
                                        <div class="col-md-6 col-lg-4 form-group mandatory" style="display: none;">
                                            {{ Form::label('', __('Package Type'), ['class' => 'form-label col-12 ']) }}

                                            {{-- Paid --}}
                                            {{ Form::radio('package_type', 'paid', null, ['class' => 'form-check-input package-type', 'data-parsley-required' => 'true', 'id' => 'package-type-paid', 'checked' => true]) }}
                                            {{ Form::label('package-type-paid', __('Paid'), ['class' => 'form-check-label']) }}

                                            {{-- Free --}}
                                            {{ Form::radio('package_type', 'free', null, ['class' => 'form-check-input package-type', 'data-parsley-required' => 'true', 'id' => 'package-type-free']) }}
                                            {{ Form::label('package-type-free', __('Free'), ['class' => 'form-check-label']) }}
                                        </div>

                                        {{-- Purchase Type --}}
                                        <div class="col-md-6 col-lg-4 form-group mandatory">
                                            {{ Form::label('', __('Purchase Type'), ['class' => 'form-label col-12 ']) }}

                                            {{-- Unlimited --}}
                                            {{ Form::radio('purchase_type', 'unlimited', null, ['class' => 'form-check-input purchase-type', 'data-parsley-required' => 'true', 'id' => 'purchase-type-unlimited', 'checked' => true]) }}
                                            {{ Form::label('purchase-type-unlimited', __('Unlimited'), ['class' => 'form-check-label']) }}

                                            {{-- One Time --}}
                                            {{ Form::radio('purchase_type', 'one_time', null, ['class' => 'form-check-input purchase-type', 'data-parsley-required' => 'true', 'id' => 'purchase-type-one-time']) }}
                                            {{ Form::label('purchase-type-one-time', __('One Time'), ['class' => 'form-check-label']) }}
                                        </div>

                                        {{-- Is Managed Listing --}}
                                        <div class="col-md-6 col-lg-4 form-group">
                                            {{ Form::label('is_managed_listing', __('Lex Managed Listing'), ['class' => 'form-label']) }}
                                            <div class="form-check form-switch">
                                                {{ Form::checkbox('is_managed_listing', '1', false, ['class' => 'form-check-input', 'id' => 'is_managed_listing']) }}
                                                {{ Form::label('is_managed_listing', __('Enable Lex Managed Listing (Commission-based)'), ['class' => 'form-check-label']) }}
                                            </div>
                                            <small
                                                class="form-text text-muted">{{ __('Price will be hidden on front website. Commission percentages will be configured by admin per customer after they select this plan.') }}</small>
                                        </div>

                                        {{-- Is Add-on --}}
                                        <div class="col-md-6 col-lg-4 form-group">
                                            {{ Form::label('is_addon', __('Plan Type'), ['class' => 'form-label']) }}
                                            <div class="form-check form-switch">
                                                {{ Form::checkbox('is_addon', '1', false, ['class' => 'form-check-input', 'id' => 'is_addon']) }}
                                                {{ Form::label('is_addon', __('Add-on Package'), ['class' => 'form-check-label']) }}
                                            </div>
                                            <small class="form-text text-muted addon-note"
                                                style="display: none;">{{ __('Add-ons allow users to add additional properties without upgrading. Not available for free plans. Does not affect subscription expiration date.') }}</small>
                                        </div>

                                        {{-- Price --}}
                                        <div class="col-md-6 col-lg-4 form-group mandatory price-div">
                                            {{ Form::label('price', __('Price') . '(' . $currency_symbol . ')', ['class' => 'form-label']) }}
                                            {{ Form::number('price', '', [
                    'class' => 'form-control ',
                    'placeholder' => trans('Price'),
                    'id' => 'price',
                    'data-parsley-required' => 'true',
                    'min' => '0',
                    'step' => '1',
                    'oninput' => 'this.value = Math.floor(this.value);'
                ])}}
                                            <small class="form-text text-muted price-note"
                                                style="display: none;">{{ __('Optional for Lex Managed Listing packages') }}</small>
                                        </div>

                                        {{-- Add-on Package Pricing --}}
                                        <div class="col-12 addon-pricing-section" style="display: none;">
                                            <hr>
                                            <h5>{{ __('Add-on Package Pricing') }} <span class="text-danger">*</span></h5>
                                            <p class="text-muted">
                                                {{ __('Set different prices for this add-on based on which paid plan the user currently has.') }}
                                            </p>

                                            <div id="addon-price-list">
                                                {{-- Dynamic rows will be added here --}}
                                            </div>
                                        </div>

                                        <!-- {{-- IOS Product ID --}}
                                                                                                                                                            <div class="col-md-6 col-lg-4 form-group" id="ios-product-id-div">
                                                                                                                                                                {{ Form::label('ios-product-id', __('IOS Product ID'), ['class' => 'form-label']) }}
                                                                                                                                                                {{ Form::text('ios_product_id', '', [
                                                                                                                                                                    'class' => 'form-control ',
                                                                                                                                                                    'placeholder' => trans('IOS Product ID'),
                                                                                                                                                                    'id' => 'ios-product-id',
                                                                                                                                                                ]) }}
                                                                                                                                                            </div> -->
                                    </div>


                                    <hr>
                                    {{-- Feature Section --}}
                                    <div class="feature-sections">
                                        <div class="mt-4" data-repeater-list="feature_data">
                                            <div class="col-md-5 pl-0 mb-4">
                                                <button type="button" class="btn btn-success add-new-feature" data-repeater-create
                                                    title="Add new row">
                                                    <span><i class="fa fa-plus"></i> {{__('Add New Feature')}}</span>
                                                </button>
                                            </div>
                                            <div class="row feature-section" data-repeater-item>
                                                {{-- Select Feature --}}
                                                <div class="form-group mandatory col-md-6 col-lg-4">
                                                    <label>{{ __('Select Feature') }} <span class="text-danger">*</span></label>
                                                    <select name="feature_id" class="form-control form-select features" required>
                                                        <option value="">{{trans('Select Option')}}</option>
                                                        @foreach ($featuresList as $feature)
                                                            <option value="{{$feature->id}}" data-type="{{$feature->type ?? ''}}"
                                                                data-feature-type="{{$feature->feature_type ?? ''}}"
                                                                data-fixed-values="{{$feature->fixed_values ? json_encode($feature->fixed_values) : ''}}"
                                                                data-selected-options="{{$feature->selected_options ? json_encode($feature->selected_options) : ''}}">
                                                                {{ __($feature->name) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                {{-- Type --}}
                                                <div class="form-group mandatory col-md-6 col-lg-3 package-types">
                                                    {{ Form::label('', __('Type'), ['class' => 'form-label col-12 ']) }}

                                                    {{-- Unlimited --}}
                                                    {{ Form::radio('type', 'unlimited', true, ['class' => 'form-check-input feature-type feature-type-unlimited', 'required' => true, 'checked' => true]) }}
                                                    {{ Form::label('', __('Unlimited'), ['class' => 'form-check-label feature-type-unlimited-label']) }}

                                                    {{-- Limited --}}
                                                    {{ Form::radio('type', 'limited', null, ['class' => 'form-check-input feature-type feature-type-limited', 'required' => true]) }}
                                                    {{ Form::label('', __('Limited'), ['class' => 'form-check-label feature-type-limited-label']) }}
                                                </div>

                                                {{-- Hidden type input for selected_based features (always limited since no
                                                unlimited option) --}}
                                                <input type="hidden" name="type" class="hidden-type-input" value="limited" disabled
                                                    style="display: none;">

                                                {{-- Limited Value - Text Input (for regular features) --}}
                                                <div class="col-md-5 col-lg-4 form-group mandatory limit-div limit-text-div"
                                                    style="display: none">
                                                    {{ Form::label('', __('Limited'), ['class' => 'form-label']) }}
                                                    {!! Form::text('limit', '', ['min' => 1, 'class' => 'form-control limit', 'placeholder' => trans('Enter your limit')]) !!}
                                                </div>

                                                {{-- Limited Value - Dropdown (for fixed_value features) --}}
                                                <div class="col-md-5 col-lg-4 form-group mandatory limit-div limit-dropdown-div"
                                                    style="display: none">
                                                    {{ Form::label('', __('Select Value'), ['class' => 'form-label']) }}
                                                    <select name="limit" class="form-control limit limit-dropdown">
                                                        <option value="">{{trans('Select Value')}}</option>
                                                    </select>
                                                </div>

                                                {{-- Remove Option --}}
                                                <div class="form-group col-md-1 pl-0 mt-4">
                                                    <button data-repeater-delete type="button"
                                                        class="btn btn-icon btn-danger remove-default-option"
                                                        title="{{__('Remove Option')}}">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>

                                    <div class="col-12 form-group mt-2">
                                        {{ Form::submit(trans('Add Package'), ['class' => 'center btn btn-primary', 'id' => 'btn_submit']) }}
                                    </div>

                                </div>
                                {!! Form::close() !!}
                            </div>

                        </div>
                    </div>
            @endif
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-striped" id="table_list" data-toggle="table"
                                    data-url="{{ route('package.show', 1) }}" data-click-to-select="true"
                                    data-side-pagination="server" data-pagination="true"
                                    data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-search-align="right"
                                    data-toolbar="#toolbar" data-show-columns="true" data-show-refresh="true"
                                    data-trim-on-search="false" data-responsive="true" data-sort-name="id"
                                    data-sort-order="desc" data-pagination-successively-size="3"
                                    data-query-params="queryParams">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th scope="col" data-field="id" data-sortable="true"> {{ __('ID') }}</th>
                                            <!-- <th scope="col" data-field="ios_product_id" data-align="center" data-sortable="true"> {{ __('IOS Product ID') }} </th> -->
                                            <th scope="col" data-field="name" data-align="center" data-sortable="true">
                                                {{ __('Name') }}
                                            </th>
                                            <th scope="col" data-field="duration" data-align="center" data-sortable="false">
                                                {{ __('Duration (In Days)') }}
                                            </th>
                                            <th scope="col" data-field="package_type" data-align="center"
                                                data-sortable="false" data-formatter="packageTypeFormatter">
                                                {{ __('Package Type') }}
                                            </th>
                                            <th scope="col" data-field="is_addon" data-align="center" data-sortable="false"
                                                data-formatter="addonTypeFormatter"> {{ __('Plan Type') }} </th>
                                            <th scope="col" data-field="price" data-align="center" data-sortable="false"
                                                data-formatter="packagePriceFormatter"> {{ __('Price') }} </th>
                                            <th scope="col" data-field="package_features" data-sortable="false"
                                                data-formatter="packageFeaturesFormatter"> {{ __('Features') }} </th>
                                            @if (has_permissions('update', 'package') && has_permissions('delete', 'package'))
                                                <th scope="col" data-field="status" data-sortable="false" data-align="center"
                                                    data-formatter="enableDisableSwitchFormatter"> {{ __('Enable/Disable') }}
                                                </th>
                                                <th scope="col" data-field="operate" data-align="center" data-sortable="false"
                                                    data-events="actionEvents"> {{ __('Action') }}</th>
                                            @elseif (has_permissions('delete', 'package') && !has_permissions('update', 'package'))
                                                <th scope="col" data-field="status" data-sortable="true" data-align="center"
                                                    data-formatter="yesNoStatusFormatter"> {{ __('Is Active ?') }}</th>
                                                <th scope="col" data-field="operate" data-align="center" data-sortable="false"
                                                    data-events="actionEvents"> {{ __('Action') }}</th>
                                            @else
                                                <th scope="col" data-field="status" data-sortable="true" data-align="center"
                                                    data-formatter="yesNoStatusFormatter"> {{ __('Is Active ?') }}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

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

        </div>

        <!-- EDIT MODEL MODEL -->
        <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myModalLabel1">{{ __('Edit Package') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ url('package') }}" class="edit-form" enctype="multipart/form-data" method="POST">
                        <div class="modal-body">
                            {{ csrf_field() }}
                            <input type="hidden" id="edit-id" name="edit_id">
                            <div class="row">
                                {{-- Package Name --}}
                                <div class="col-12 form-group mandatory">
                                    {{ Form::label('edit-name', __('Package Name'), ['class' => 'form-label']) }}
                                    {{ Form::text('name', '', [
        'class' => 'form-control ',
        'placeholder' => trans('Package Name'),
        'data-parsley-required' => 'true',
        'id' => 'edit-name',
    ]) }}
                                </div>

                                <!-- {{-- IOS Product ID --}}
                                                                        <div class="col-12 form-group">
                                                                            {{ Form::label('edit-ios-product-id', __('IOS Product ID'), ['class' => 'form-label']) }}
                                                                            {{ Form::text('ios_product_id', '', [
                                                                                'class' => 'form-control ',
                                                                                'placeholder' => trans('IOS Product ID'),
                                                                                'id' => 'edit-ios-product-id',
                                                                            ]) }}
                                                                        </div> -->

                                {{-- Package Type (Hidden - forced to Paid) --}}
                                <div class="col-12 form-group mandatory" style="display: none;">
                                    {{ Form::label('', __('Package Type'), ['class' => 'form-label col-12 ']) }}

                                    {{-- Paid --}}
                                    {{ Form::radio('package_type', 'paid', null, ['class' => 'form-check-input edit-package-type', 'data-parsley-required' => 'true', 'id' => 'edit-package-type-paid']) }}
                                    {{ Form::label('edit-package-type-paid', __('Paid'), ['class' => 'form-check-label']) }}

                                    {{-- Free --}}
                                    {{ Form::radio('package_type', 'free', null, ['class' => 'form-check-input edit-package-type', 'data-parsley-required' => 'true', 'id' => 'edit-package-type-free']) }}
                                    {{ Form::label('edit-package-type-free', __('Free'), ['class' => 'form-check-label']) }}
                                </div>

                                {{-- Duration (Hidden - Fixed 30 days) --}}
                                <input type="hidden" name="duration" id="edit-duration" value="30">

                                {{-- Price --}}
                                <div class="col-12 form-group mandatory" id="edit-price-div">
                                    {{ Form::label('edit-price', __('Price') . '(' . $currency_symbol . ')', ['class' => 'form-label']) }}
                                    {{ Form::number('price', '', [
        'class' => 'form-control ',
        'placeholder' => trans('Price'),
        'id' => 'edit-price',
        'data-parsley-required' => 'true',
        'min' => '0',
        'step' => '1',
        'oninput' => 'this.value = Math.floor(this.value);'
    ])}}
                                </div>

                                {{-- Purchase Type --}}
                                <div class="col-12 form-group mandatory">
                                    {{ Form::label('', __('Purchase Type'), ['class' => 'form-label col-12 ']) }}

                                    {{-- Unlimited --}}
                                    {{ Form::radio('purchase_type', 'unlimited', null, ['class' => 'form-check-input edit-purchase-type', 'data-parsley-required' => 'true', 'id' => 'edit-purchase-type-unlimited']) }}
                                    {{ Form::label('edit-purchase-type-unlimited', __('Unlimited'), ['class' => 'form-check-label']) }}

                                    {{-- One Time --}}
                                    {{ Form::radio('purchase_type', 'one_time', null, ['class' => 'form-check-input edit-purchase-type', 'data-parsley-required' => 'true', 'id' => 'edit-purchase-type-one-time']) }}
                                    {{ Form::label('edit-purchase-type-one-time', __('One Time'), ['class' => 'form-check-label']) }}
                                </div>

                                {{-- Is Managed Listing --}}
                                <div class="col-12 form-group">
                                    {{ Form::label('edit-is_managed_listing', __('Lex Managed Listing'), ['class' => 'form-label']) }}
                                    <div class="form-check form-switch">
                                        {{ Form::checkbox('is_managed_listing', '1', false, ['class' => 'form-check-input', 'id' => 'edit-is_managed_listing']) }}
                                        {{ Form::label('edit-is_managed_listing', __('Enable Lex Managed Listing (Commission-based)'), ['class' => 'form-check-label']) }}
                                    </div>
                                    <small
                                        class="form-text text-muted">{{ __('Price will be hidden on front website. Commission percentages will be configured by admin per customer after they select this plan.') }}</small>
                                </div>

                                {{-- Is Add-on --}}
                                <div class="col-12 form-group">
                                    {{ Form::label('edit-is_addon', __('Plan Type'), ['class' => 'form-label']) }}
                                    <div class="form-check form-switch">
                                        {{ Form::checkbox('is_addon', '1', false, ['class' => 'form-check-input', 'id' => 'edit-is_addon']) }}
                                        {{ Form::label('edit-is_addon', __('Add-on Package'), ['class' => 'form-check-label']) }}
                                    </div>
                                    <small class="form-text text-muted edit-addon-note"
                                        style="display: none;">{{ __('Add-ons allow users to add additional properties without upgrading. Not available for free plans. Does not affect subscription expiration date.') }}</small>
                                </div>

                                {{-- Add-on Package Pricing (Edit) --}}
                                <div class="col-12 edit-addon-pricing-section" style="display: none;">
                                    <hr>
                                    <h5>{{ __('Add-on Package Pricing') }} <span class="text-danger">*</span></h5>
                                    <p class="text-muted">
                                        {{ __('Set different prices for this add-on based on which paid plan the user currently has.') }}
                                    </p>

                                    <div id="edit-addon-price-list">
                                        {{-- Dynamic rows will be added here --}}
                                    </div>
                                </div>

                                <hr>
                                {{-- Feature Section --}}
                                <div class="edit-feature-sections">
                                    <div class="mt-4" data-repeater-list="feature_data">
                                        <div class="col-md-5 pl-0 mb-4">
                                            <button type="button" class="btn btn-success edit-add-new-feature"
                                                data-repeater-create title="Add new row">
                                                <span><i class="fa fa-plus"></i> {{__('Add New Feature')}}</span>
                                            </button>
                                        </div>
                                        <div class="row edit-feature-section" data-repeater-item>
                                            {{-- Select Feature --}}
                                            <div class="form-group mandatory col-md-6 col-lg-4">
                                                <label>{{ __('Select Feature') }} <span class="text-danger">*</span></label>
                                                <select name="feature_id" class="form-control form-select edit-features"
                                                    required>
                                                    <option value="">{{trans('Select Option')}}</option>
                                                    @foreach ($featuresList as $feature)
                                                        <option value="{{$feature->id}}" data-type="{{$feature->type ?? ''}}"
                                                            data-feature-type="{{$feature->feature_type ?? ''}}"
                                                            data-fixed-values="{{$feature->fixed_values ? json_encode($feature->fixed_values) : ''}}"
                                                            data-selected-options="{{$feature->selected_options ? json_encode($feature->selected_options) : ''}}">
                                                            {{ __($feature->name) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            {{-- Type --}}
                                            <div class="form-group mandatory col-md-6 col-lg-3 edit-package-types">
                                                {{ Form::label('', __('Type'), ['class' => 'form-label col-12 ']) }}

                                                {{-- Unlimited --}}
                                                {{ Form::radio('type', 'unlimited', true, ['class' => 'form-check-input edit-feature-type edit-feature-type-unlimited', 'required' => true, 'checked' => true]) }}
                                                {{ Form::label('', __('Unlimited'), ['class' => 'form-check-label edit-feature-type-unlimited-label']) }}

                                                {{-- Limited --}}
                                                {{ Form::radio('type', 'limited', null, ['class' => 'form-check-input edit-feature-type edit-feature-type-limited', 'required' => true]) }}
                                                {{ Form::label('', __('Limited'), ['class' => 'form-check-label edit-feature-type-limited-label']) }}
                                            </div>

                                            {{-- Hidden type input for selected_based features --}}
                                            <input type="hidden" name="type" class="edit-hidden-type-input" value="limited"
                                                disabled style="display: none;">

                                            {{-- Limited Value - Text Input --}}
                                            <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-text-div"
                                                style="display: none">
                                                {{ Form::label('', __('Limited'), ['class' => 'form-label']) }}
                                                {!! Form::text('limit', '', ['min' => 1, 'class' => 'form-control edit-limit', 'placeholder' => trans('Enter your limit')]) !!}
                                            </div>

                                            {{-- Limited Value - Dropdown --}}
                                            <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-dropdown-div"
                                                style="display: none">
                                                {{ Form::label('', __('Select Value'), ['class' => 'form-label']) }}
                                                <select name="limit" class="form-control edit-limit edit-limit-dropdown">
                                                    <option value="">{{trans('Select Value')}}</option>
                                                </select>
                                            </div>

                                            {{-- Remove Option --}}
                                            <div class="form-group col-md-1 pl-0 mt-4">
                                                <button data-repeater-delete type="button"
                                                    class="btn btn-icon btn-danger edit-remove-default-option"
                                                    title="{{__('Remove Option')}}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>

                                @if(isset($languages) && $languages->count() > 0)
                                    {{-- Translations Div --}}
                                    <div class="translation-div mt-4">
                                        <div class="col-12">
                                            <div class="divider">
                                                <div class="divider-text">
                                                    <h5>{{ __('Translations for Package Name') }}</h5>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Fields for Translations --}}
                                        @foreach($languages as $key => $language)
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="translation-{{ $language->id }}">{{ $language->name }}</label>
                                                    <input type="hidden" name="translations[{{ $key }}][id]" value=""
                                                        class="edit-translations" id="edit-translation-id-{{ $language->id }}">
                                                    <input type="hidden" name="translations[{{ $key }}][language_id]"
                                                        value="{{ $language->id }}">
                                                    <input type="text" name="translations[{{ $key }}][value]"
                                                        id="edit-translation-{{ $language->id }}"
                                                        class="form-control edit-translations" value=""
                                                        placeholder="{{ __('Enter Package Name') }}">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif

                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary waves-effect"
                                data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <input type="submit" class="btn btn-primary waves-effect waves-light" id="btn_submit" value="{{ __('Save') }}">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- EDIT MODEL -->
    </section>
@endsection

@section('script')
    <script>
        function getFeatureGroup(featureTypeSlug) {
            let type = (featureTypeSlug || '').toLowerCase().trim();

            if (['property_list', 'property_map', 'property_customer_detail', 'contact_info', 'paid_ads_promotion', 'organic_marketing'].includes(type)) {
                return 'always_unlimited';
            }

            if (['property_limit', 'property_gallery', 'image_gallery'].includes(type)) {
                return 'type_with_numeric';
            }

            if (['visibility_level', 'featured_listings', 'most_viewed_listing', 'most_favourite_listing'].includes(type)) {
                return 'always_limited_dropdown';
            }

            return 'default';
        }

        $(document).ready(function () {
            // Global feature ID for Property Limit (used in add-on logic)
            window.propertyLimitFeatureId = {{ $featureMapData['property_limit'] ?? ($featureMapData['Property Limit'] ?? 0) }};

            // Store paid packages data from server
            const paidPackages = @json($paidPackages);

            // Function to generate add-on pricing rows
            function generateAddonPricingRows() {
                let html = '';
                paidPackages.forEach(function (pkg) {
                    html += `
                                                                <div class="row mb-3 addon-price-row" data-package-id="${pkg.id}">
                                                                    <div class="col-md-4">
                                                                        <label class="form-label">${pkg.name} <span class="text-danger">*</span></label>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="input-group">
                                                                            <span class="input-group-text">{{ $currency_symbol }}</span>
                                                                            <input type="number" 
                                                                                   name="addon_prices[${pkg.id}]" 
                                                                                   class="form-control addon-price-input" 
                                                                                   placeholder="Enter price for ${pkg.name} users"
                                                                                   min="0" 
                                                                                   step="1"
                                                                                   oninput="this.value = Math.floor(this.value);"
                                                                                   data-parsley-required="true"
                                                                                   required>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            `;
                });
                $('#addon-price-list').html(html);
            }

            // Function to generate edit add-on pricing rows (loads existing prices)
            window.generateEditAddonPricingRows = function (addonPackageId) {
                // Fetch existing addon prices for this package
                console.log('Fetching addon prices for package ID:', addonPackageId);
                $.ajax({
                    url: '{{ url("get-addon-prices") }}/' + addonPackageId,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        console.log('Addon prices API response:', response);
                        let existingPrices = {};
                        if (response.data) {
                            response.data.forEach(function (price) {
                                existingPrices[price.base_package_id] = price.price ? Math.floor(price.price) : '';
                            });
                            console.log('Mapped existing prices:', existingPrices);
                        }

                        let html = '';
                        paidPackages.forEach(function (pkg) {
                            let existingPrice = existingPrices[pkg.id] || '';
                            html += `
                                                                        <div class="row mb-3 addon-price-row" data-package-id="${pkg.id}">
                                                                            <div class="col-md-4">
                                                                                <label class="form-label">${pkg.name} <span class="text-danger">*</span></label>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div class="input-group">
                                                                                    <span class="input-group-text">{{ $currency_symbol }}</span>
                                                                                    <input type="number" 
                                                                                           name="addon_prices[${pkg.id}]" 
                                                                                           class="form-control addon-price-input" 
                                                                                           placeholder="Enter price for ${pkg.name} users"
                                                                                           value="${existingPrice}"
                                                                                           min="0" 
                                                                                                   step="1"
                                                                                           oninput="this.value = Math.floor(this.value);"
                                                                                           data-parsley-required="true"
                                                                                           required>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    `;
                        });
                        $('#edit-addon-price-list').html(html);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error('API Error when fetching addon prices:', textStatus, errorThrown);
                        // If API fails, just show empty fields
                        let html = '';
                        paidPackages.forEach(function (pkg) {
                            html += `
                                                                        <div class="row mb-3 addon-price-row" data-package-id="${pkg.id}">
                                                                            <div class="col-md-4">
                                                                                <label class="form-label">${pkg.name} <span class="text-danger">*</span></label>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div class="input-group">
                                                                                    <span class="input-group-text">{{ $currency_symbol }}</span>
                                                                                    <input type="number" 
                                                                                           name="addon_prices[${pkg.id}]" 
                                                                                           class="form-control addon-price-input" 
                                                                                           placeholder="Enter price for ${pkg.name} users"
                                                                                           min="0" 
                                                                                           step="1"
                                                                                           oninput="this.value = Math.floor(this.value);"
                                                                                           data-parsley-required="true"
                                                                                           required>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    `;
                        });
                        $('#edit-addon-price-list').html(html);
                    }
                });
            }

            // Handle Add-on checkbox change
            $('#is_addon').on('change', function () {
                if ($(this).is(':checked')) {
                    // Disable Lex Managed Listing (mutual exclusion)
                    $('#is_managed_listing').prop('checked', false).prop('disabled', true);

                    // Add-ons must be paid, so set package type to paid and disable free option
                    $('#package-type-paid').prop('checked', true);
                    $('#package-type-free').prop('disabled', true);

                    // Disable Purchase Type and set to Unlimited
                    $('#purchase-type-unlimited').prop('checked', true);
                    $('#purchase-type-unlimited').prop('disabled', false).css('pointer-events', 'none');
                    $('#purchase-type-one-time').prop('disabled', true);

                    // Hide duration field (add-ons don't expire)
                    $('#duration').closest('.form-group').hide();
                    $('#duration').removeAttr('data-parsley-required');
                    $('#duration').removeAttr('required');
                    $('#duration').prop('disabled', true); // ✅ Disable it so Parsley ignores it
                    $('#duration').val(0); // Set duration to 0 for add-ons

                    // Hide normal price field
                    $('.price-div').hide();
                    $("#price").removeAttr('data-parsley-required');
                    $("#price").val(''); // Clear price

                    // Show addon pricing section
                    $('.addon-pricing-section').show();
                    generateAddonPricingRows();

                    // Hide and disable Add New Feature button
                    $('.add-new-feature').hide();

                    // Keep only first feature row and hide remove button
                    $('.feature-section').not(':first').remove();
                    $('.feature-section:first').find('.remove-default-option').hide();

                    // Select property_limit feature and disable dropdown
                    let propertyLimitFeatureId = {{ $featureMapData['property_limit'] ?? 0 }};
                    if (propertyLimitFeatureId) {
                        // Re-enable feature select dropdown
                        let firstFeatureRow = $('.feature-section:first');
                        firstFeatureRow.find('.features').prop('disabled', false);
                        firstFeatureRow.find('.create-hidden-feature-id').remove();
                        let featureDropdown = firstFeatureRow.find('.features');

                        // Set the value and trigger change to show type/limit fields
                        featureDropdown.val(propertyLimitFeatureId).trigger('change');

                        // Remove Parsley required from disabled dropdown to prevent validation errors
                        featureDropdown.removeAttr('data-parsley-required');
                        featureDropdown.removeAttr('required');

                        // Add hidden input for the feature_id since disabled fields don't submit
                        if (firstFeatureRow.find('input[name="' + featureDropdown.attr('name') + '"][type="hidden"]').length === 0) {
                            firstFeatureRow.append('<input type="hidden" class="create-hidden-feature-id" name="' + featureDropdown.attr('name') + '" value="' + propertyLimitFeatureId + '">');
                        }

                        // Disable dropdown for visual purposes only
                        featureDropdown.prop('disabled', true);

                        console.log('✅ Property Limit feature selected:', propertyLimitFeatureId);
                        console.log('  - Hidden input added for feature_id:', propertyLimitFeatureId);
                        console.log('  - Parsley required removed from disabled dropdown');
                    }

                    // Show addon note
                    $('.addon-note').show();

                    // IMPORTANT: Refresh Parsley validation to include new addon price fields
                    setTimeout(function () {
                        if ($('.create-form').parsley()) {
                            // Configure Parsley to ignore disabled and hidden fields
                            $('.create-form').parsley().destroy();
                            $('.create-form').parsley({
                                excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], input:disabled, select:disabled'
                            });

                            console.log('✅ Parsley validation refreshed for addon pricing fields');
                            console.log('  - Configured to ignore disabled fields');
                        }
                    }, 150);
                } else {
                    // Re-enable Lex Managed Listing
                    $('#is_managed_listing').prop('disabled', false);

                    // Re-enable free option
                    $('#package-type-free').prop('disabled', false);

                    // Re-enable Purchase Type
                    $('#purchase-type-unlimited').prop('disabled', false).css('pointer-events', 'auto');
                    $('#purchase-type-one-time').prop('disabled', false);

                    // Show duration field
                    $('#duration').closest('.form-group').show();
                    $('#duration').attr('data-parsley-required', true);

                    // Show normal price field
                    $('.price-div').show();

                    // Hide addon pricing section
                    $('.addon-pricing-section').hide();
                    $('#addon-price-list').empty(); // Clear addon price fields to remove validation constraints

                    // Show Add New Feature button
                    $('.add-new-feature').show();

                    // Re-enable feature dropdown and show remove button
                    $('.features').prop('disabled', false);
                    $('.remove-default-option').show();

                    // Hide addon note
                    $('.addon-note').hide();

                    // Reset price requirement based on package type and managed listing
                    if ($('input[name="package_type"]:checked').val() == 'paid' && !$('#is_managed_listing').is(':checked')) {
                        $("#price").attr('data-parsley-required', true);
                        $('.price-div').addClass('mandatory');
                    }
                }
            });

            // Handle form submission for add-on packages
            // Add button click listener for debugging
            $('.create-form').find('input[type="submit"]').on('click', function (e) {
                console.log('🔘 ADD PACKAGE BUTTON CLICKED');
                console.log('  - Button:', $(this).val());
                console.log('  - Form:', $(this).closest('form').attr('class'));

                // Check if form has Parsley instance
                let form = $(this).closest('form');
                if (form.parsley()) {
                    console.log('  - Parsley attached: YES');

                    // Manually validate to see what's failing
                    console.log('🔍 MANUAL VALIDATION CHECK:');
                    let isValid = form.parsley().validate();
                    console.log('  - Is Valid:', isValid);

                    if (!isValid) {
                        console.error('❌ PARSLEY VALIDATION BLOCKING SUBMISSION');
                        console.log('🔍 Checking all fields with errors:');

                        // Find all fields with Parsley errors
                        form.find('[data-parsley-id]').each(function () {
                            let field = $(this);
                            let fieldParsley = field.parsley();

                            if (fieldParsley && !fieldParsley.isValid()) {
                                console.error('  ❌ Field:', {
                                    name: field.attr('name'),
                                    type: field.attr('type'),
                                    value: field.val(),
                                    visible: field.is(':visible'),
                                    disabled: field.prop('disabled'),
                                    required: field.attr('required') || field.attr('data-parsley-required'),
                                    errors: fieldParsley.getErrorsMessages()
                                });
                            }
                        });
                    }
                } else {
                    console.log('  - Parsley attached: NO');
                }
            });

            // Listen for Parsley validation events
            $('.create-form').parsley().on('form:error', function () {
                console.error('🚨 PARSLEY FORM VALIDATION ERROR EVENT TRIGGERED');
            });

            $('.create-form').parsley().on('form:success', function () {
                console.log('✅ PARSLEY FORM VALIDATION SUCCESS EVENT TRIGGERED');
            });

            $('.create-form').parsley().on('form:validate', function () {
                console.log('🔄 PARSLEY FORM VALIDATION EVENT TRIGGERED');
            });

            $('.create-form').on('submit', function (e) {
                console.log('📤 CREATE FORM SUBMIT TRIGGERED');
                console.log('─────────────────────────────────────────');

                // Log form state
                console.log('🔍 Form State Check:');
                console.log('  - Is Add-on:', $('#is_addon').is(':checked'));
                console.log('  - Package Name:', $('input[name="name"]').val());
                console.log('  - Package Type:', $('input[name="package_type"]:checked').val());
                console.log('  - Purchase Type:', $('input[name="purchase_type"]:checked').val());

                // Check Parsley validation
                let parsleyInstance = $(this).parsley();
                if (parsleyInstance) {
                    console.log('🔍 Parsley Validation Instance Found');
                    let isValid = parsleyInstance.validate();
                    console.log('  - Is Valid:', isValid);

                    if (!isValid) {
                        console.error('❌ VALIDATION FAILED');
                        let errors = parsleyInstance.validationResult;
                        console.log('  - Validation Errors:', errors);

                        // Log specific field errors
                        $(this).find('[data-parsley-id]').each(function () {
                            if ($(this).parsley().validationResult === false) {
                                console.error('    ❌ Field Error:', {
                                    field: $(this).attr('name'),
                                    value: $(this).val(),
                                    errors: $(this).parsley().getErrorsMessages()
                                });
                            }
                        });

                        return false; // Prevent submission
                    }
                } else {
                    console.warn('⚠️ No Parsley instance found');
                }

                // If this is an add-on package, enable disabled fields before submit
                if ($('#is_addon').is(':checked')) {
                    console.log('🔧 Add-on package detected, enabling disabled fields for submission');

                    // Log addon prices
                    console.log('  - Addon Prices:');
                    $('input[name^="addon_prices"]').each(function () {
                        console.log('    - ' + $(this).attr('name') + ':', $(this).val());
                    });

                    // Log feature data
                    console.log('  - Feature Data:');
                    $('.features').each(function () {
                        console.log('    - Feature:', $(this).val(), 'Disabled:', $(this).prop('disabled'));
                    });

                    // Enable the feature dropdown temporarily so its value is submitted
                    $('.feature-section:first').find('.features').prop('disabled', false);

                    // Enable purchase type radio buttons
                    $('#purchase-type-unlimited').prop('disabled', false);
                    $('#purchase-type-one-time').prop('disabled', false);

                    // ✅ Enable duration field so its value (30) is submitted
                    $('#duration').val(30).prop('disabled', false);
                    console.log('  - Duration field enabled for submission, value:', $('#duration').val());

                    console.log('✅ Disabled fields enabled for submission');
                }

                console.log('✅ FORM VALIDATION PASSED - Submitting...');
                console.log('─────────────────────────────────────────');

                // Let form submit normally
                return true;
            });

            // Handle edit form submission for add-on packages
            $('.edit-form').on('submit', function (e) {
                console.log('📤 Edit form submit triggered');

                // If this is an add-on package, enable disabled fields before submit
                if ($('#edit-is_addon').is(':checked')) {
                    console.log('🔧 Edit add-on package detected, enabling disabled fields for submission');

                    // Enable all feature-related fields in the first row
                    let firstRow = $('.edit-feature-section').first();
                    firstRow.find('.edit-features').prop('disabled', false);
                    firstRow.find('.edit-feature-type').prop('disabled', false);
                    firstRow.find('.edit-hidden-type-input').prop('disabled', false);
                    firstRow.find('.edit-limit').prop('disabled', false);

                    // Enable purchase type radio buttons
                    $('#edit-purchase-type-unlimited').prop('disabled', false);
                    $('#edit-purchase-type-one-time').prop('disabled', false);

                    // Enable package type radio (in case it was disabled by Lex Managed)
                    $('#edit-package-type-paid').prop('disabled', false);
                    $('#edit-package-type-free').prop('disabled', false);

                    console.log('✅ Disabled fields enabled for submission');
                }

                // Let form submit normally
                return true;
            });

            // Handle Lex Managed Listing checkbox change
            $('#is_managed_listing').on('change', function () {
                if ($(this).is(':checked')) {
                    // Disable Add-on checkbox (mutual exclusion)
                    $('#is_addon').prop('checked', false).prop('disabled', true);

                    // If managed listing is enabled, make price optional
                    $("#price").removeAttr('data-parsley-required');
                    $('.price-div').removeClass('mandatory');
                    $('.price-note').show();
                } else {
                    // Re-enable Add-on checkbox
                    $('#is_addon').prop('disabled', false);

                    // If managed listing is disabled, check package type to determine if price is required
                    if ($('input[name="package_type"]:checked').val() == 'paid') {
                        $("#price").attr('data-parsley-required', true);
                        $('.price-div').addClass('mandatory');
                    }
                    $('.price-note').hide();
                }
            });

            $('.package-type').on('click', function (e) {
                $("#price").val("");
                $("#ios-product-id").val("");
                if ($(this).val() == 'paid') {
                    // Show Price Div
                    $('.price-div').show();
                    // Only make price required if managed listing is not enabled
                    if (!$('#is_managed_listing').is(':checked')) {
                        $("#price").attr('data-parsley-required', true);
                        $('.price-div').addClass('mandatory');
                    }
                    $("#price").val("");

                    // Show IOS Product ID Div
                    $("#ios-product-id-div").show();
                } else {
                    // Hide Price Div
                    $("#price").removeAttr('data-parsley-required');
                    $('.price-div').removeClass('mandatory').hide();
                    // Hide IOS Product ID Div
                    $("#ios-product-id-div").hide();
                }
            })
            $(".add-new-feature").trigger('click');
            checkDuplicateFeatures('.features', '.add-new-feature'); // Check duplicates after adding a new row

        });
        $(document).on('change', '.features', function (e) {
            let value = $(this).val();

            // If no feature is selected, reset and show default state
            if (!value || value === '') {
                let packageTypesDiv = $(this).parent().parent().find('.package-types');
                let limitTextDiv = $(this).parent().parent().find('.limit-text-div');
                let limitDropdownDiv = $(this).parent().parent().find('.limit-dropdown-div');
                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');

                // Show package-types by default (backward compatible)
                packageTypesDiv.show();
                limitTextDiv.hide();
                limitDropdownDiv.hide();
                hiddenTypeInput.prop('disabled', true);

                // Enable and reset radio buttons
                let limitRadioElement = $(this).parent().parent().find('.package-types').find('.feature-type-limited');
                let unlimitedRadioElement = $(this).parent().parent().find('.package-types').find('.feature-type-unlimited');
                let limitRadioLabelElement = $(this).parent().parent().find('.package-types').find('.feature-type-limited-label');
                let unlimitedRadioLabelElement = $(this).parent().parent().find('.package-types').find('.feature-type-unlimited-label');
                limitRadioElement.show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show();
                unlimitedRadioLabelElement.show();
                limitRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('disabled', false).prop('checked', true);

                checkDuplicateFeatures('.features', '.add-new-feature');
                return;
            }

            let selectedOption = $(this).find('option:selected');
            let featureType = selectedOption.data('feature-type');

            // Parse JSON data attributes (they come as strings)
            let fixedValues = null;
            let selectedOptions = null;
            try {
                let fixedValuesStr = selectedOption.attr('data-fixed-values');
                if (fixedValuesStr && fixedValuesStr !== '') {
                    fixedValues = JSON.parse(fixedValuesStr);
                }
            } catch (e) {
                fixedValues = null;
            }
            try {
                let selectedOptionsStr = selectedOption.attr('data-selected-options');
                if (selectedOptionsStr && selectedOptionsStr !== '') {
                    selectedOptions = JSON.parse(selectedOptionsStr);
                }
            } catch (e) {
                selectedOptions = null;
            }

            checkDuplicateFeatures('.features', '.add-new-feature'); // Check duplicates after adding a new row

            // Get package-types container and radio elements
            let packageTypesDiv = $(this).parent().parent().find('.package-types');
            let limitRadioElement = $(this).parent().parent().find('.package-types').find('.feature-type-limited');
            let limitRadioLabelElement = $(this).parent().parent().find('.package-types').find('.feature-type-limited-label');
            let unlimitedRadioElement = $(this).parent().parent().find('.package-types').find('.feature-type-unlimited');
            let unlimitedRadioLabelElement = $(this).parent().parent().find('.package-types').find('.feature-type-unlimited-label');

            let limitTextDiv = $(this).parent().parent().find('.limit-text-div');
            let limitDropdownDiv = $(this).parent().parent().find('.limit-dropdown-div');
            let limitDropdown = $(this).parent().parent().find('.limit-dropdown');
            let limitTextInput = $(this).parent().parent().find('.limit-text-div .limit');

            let featureName = selectedOption.text();
            let typeSlug = selectedOption.attr('data-type');
            let featureGroup = getFeatureGroup(typeSlug);

            // 🔍 DEBUG: Log feature data
            console.log('📦 Feature Selected:', {
                featureName: featureName,
                typeSlug: typeSlug,
                featureGroup: featureGroup,
                featureType: featureType,
                fixedValues: fixedValues,
                selectedOptions: selectedOptions,
                fixedValuesRaw: selectedOption.attr('data-fixed-values'),
                selectedOptionsRaw: selectedOption.attr('data-selected-options')
            });

            // Reset all fields first
            packageTypesDiv.show();
            limitTextDiv.hide();
            limitDropdownDiv.hide();
            limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');
            limitTextInput.val('').prop('disabled', true);
            limitDropdown.prop('disabled', true);

            if (featureGroup === 'always_unlimited') {
                packageTypesDiv.hide();
                limitTextDiv.hide();
                limitDropdownDiv.hide();
                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');
                hiddenTypeInput.val('unlimited').prop('disabled', false);
                limitRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false);
                unlimitedRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false);
                limitRadioElement.hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.hide();
                unlimitedRadioLabelElement.hide();
            } else if (featureGroup === 'type_with_numeric') {
                packageTypesDiv.show();
                limitRadioElement.attr('required', true).show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show().prop('disabled', false);
                unlimitedRadioLabelElement.show();
                unlimitedRadioElement.prop('checked', true);

                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');
                hiddenTypeInput.prop('disabled', true);

                limitRadioElement.prop('disabled', false).show();
                limitTextDiv.hide();
                limitTextInput.attr('type', 'number').attr('min', '1').attr('step', '1');
                limitDropdown.removeAttr('data-parsley-required');
                limitTextInput.removeAttr('data-parsley-required');
                limitDropdown.prop('disabled', true);
                unlimitedRadioElement.prop('checked', true).click();
            } else if (featureGroup === 'always_limited_dropdown' || featureType === 'fixed_value') {
                packageTypesDiv.hide();
                limitDropdownDiv.show();
                limitTextDiv.hide();

                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');
                hiddenTypeInput.val('limited').prop('disabled', false);
                limitRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false);
                unlimitedRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false);
                limitRadioElement.hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.hide();
                unlimitedRadioLabelElement.hide();

                if (fixedValues && fixedValues.length > 0) {
                    limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');
                    fixedValues.forEach(function (value) {
                        limitDropdown.append('<option value="' + value + '">' + value + '</option>');
                    });
                    limitDropdown.attr('data-parsley-required', 'true').prop('disabled', false);
                } else {
                    limitDropdown.removeAttr('data-parsley-required').prop('disabled', true);
                }
                limitTextInput.removeAttr('data-parsley-required').prop('disabled', true);
            } else if (featureType === 'selected_based') {
                // Hide Limited/Unlimited radio options for selected_based features
                packageTypesDiv.hide();
                limitRadioElement.removeAttr('required');
                unlimitedRadioElement.removeAttr('required');

                // Hide radio buttons and show hidden input with type='limited'
                limitRadioElement.hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.hide();
                unlimitedRadioLabelElement.hide();

                // Set hidden type input to 'limited' for selected_based (no unlimited option)
                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');
                hiddenTypeInput.val('limited').prop('disabled', false);

                // Disable radio buttons to prevent them from submitting
                limitRadioElement.prop('disabled', true).prop('checked', false);
                unlimitedRadioElement.prop('disabled', true).prop('checked', false);

                // Show dropdown directly with selected options (no Limited/Unlimited choice)
                if (selectedOptions && selectedOptions.length > 0) {
                    limitDropdownDiv.show();
                    limitTextDiv.hide();

                    // Clear and populate dropdown
                    limitDropdown.empty();
                    selectedOptions.forEach(function (option, index) {
                        limitDropdown.append('<option value="' + option + '">' + option + '</option>');
                    });

                    // Auto-select first option for selected_based features to ensure limit is always set
                    if (selectedOptions.length > 0) {
                        limitDropdown.val(selectedOptions[0]).prop('disabled', false);
                    }

                    // Make dropdown required since there's no unlimited option for selected_based
                    limitDropdown.attr('data-parsley-required', true).prop('disabled', false);
                    limitTextInput.removeAttr('data-parsley-required').prop('disabled', true);
                } else {
                    // If no options, hide everything
                    limitDropdownDiv.hide();
                    limitTextDiv.hide();
                    limitDropdown.removeAttr('data-parsley-required');
                }
            } else {
                // No feature_type or regular feature - show Limited/Unlimited radio options (backward compatible)
                packageTypesDiv.show();
                limitRadioElement.attr('required', true).show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show();
                unlimitedRadioLabelElement.show();

                // Hide and disable hidden type input, enable radio buttons
                let hiddenTypeInput = $(this).parent().parent().find('.hidden-type-input');
                hiddenTypeInput.prop('disabled', true);

                // Enable radio buttons for regular features
                limitRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('disabled', false);

                // Auto-select unlimited by default (no validation required)
                unlimitedRadioElement.prop('checked', true).click();

                // Remove required from limit inputs initially (will be added when Limited is selected)
                limitTextInput.removeAttr('data-parsley-required');
                limitDropdown.removeAttr('data-parsley-required');

                // Disable both initially
                limitTextInput.prop('disabled', true);
                limitDropdown.prop('disabled', true);

                // Use regular text input for features without feature_type
                limitTextDiv.hide(); // Hide initially, will show when Limited is selected
                limitDropdownDiv.hide();

            }

        });
        $(document).on('change', '.feature-type', function (e) {
            let value = $(this).val();
            let featureSelect = $(this).closest('.feature-section').find('.features');
            let selectedOption = featureSelect.find('option:selected');
            let featureType = null;

            // Get feature type from data attribute
            try {
                featureType = selectedOption.attr('data-feature-type');
            } catch (e) {
                featureType = null;
            }

            let limitDiv = $(this).closest('.feature-section').find('.limit-div');
            let limitTextDiv = $(this).closest('.feature-section').find('.limit-text-div');
            let limitDropdownDiv = $(this).closest('.feature-section').find('.limit-dropdown-div');

            // 🔍 DEBUG: Log type change
            console.log('🔄 Type Changed:', {
                value: value,
                featureName: selectedOption.text(),
                typeSlug: selectedOption.attr('data-type'),
                featureType: featureType,
                featureGroup: getFeatureGroup(selectedOption.attr('data-type')),
                limitTextDivExists: limitTextDiv.length > 0,
                limitDropdownDivExists: limitDropdownDiv.length > 0
            });

            // Only handle Limited/Unlimited if feature_type is 'fixed_value' or not set
            // For 'selected_based', the dropdown is always shown (no Limited/Unlimited option)
            // if (featureType === 'selected_based') {
            //     // For selected_based, dropdown is always visible and required, no need to handle Limited/Unlimited
            //     // The dropdown should always be shown and required (handled in feature change handler)
            //     console.log('⏭️ Skipping: selected_based feature');
            //     return;
            // }

            let featureGroup = getFeatureGroup(selectedOption.attr('data-type'));
            if (featureGroup === 'always_unlimited' || featureGroup === 'always_limited_dropdown') {
                console.log('⏭️ Skipping: Group A or C (no type selection)');
                return;
            }

            if (value == 'limited') {
                console.log('✅ Limited selected, showing limit field for:', featureGroup);

                if (featureGroup === 'type_with_numeric') {
                    console.log('📊 Showing numeric limit field');
                    limitTextDiv.show();
                    limitTextDiv.find('.limit').attr('type', 'number').attr('min', '1').attr('step', '1').attr('data-parsley-required', 'true').prop('disabled', false);
                    limitDropdownDiv.hide();
                    limitDropdownDiv.find('.limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true);
                    console.log('✅ Limit text div shown, dropdown hidden');
                    return;
                }

                // Show the appropriate limit div (text or dropdown) based on feature type
                // Check if dropdown has options (meaning feature has feature_type = 'fixed_value')
                if (limitDropdownDiv.find('.limit-dropdown option').length > 1) {
                    console.log('📊 Showing dropdown (has options)');
                    // Fixed value feature - show dropdown and make it required
                    limitDropdownDiv.show();
                    limitDropdownDiv.find('.limit-dropdown').attr('data-parsley-required', 'true').prop('disabled', false);
                    limitTextDiv.hide();
                    limitTextDiv.find('.limit').removeAttr('data-parsley-required').prop('disabled', true);
                } else {
                    console.log('📊 Showing text input (no dropdown options)');
                    // Regular feature - show text input and make it required
                    limitTextDiv.show();
                    limitTextDiv.find('.limit').attr('data-parsley-required', 'true').prop('disabled', false);
                    limitDropdownDiv.hide();
                    limitDropdownDiv.find('.limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true);
                }
            } else {
                console.log('❌ Unlimited selected, hiding limit fields');
                // Unlimited selected - remove required validation and hide inputs, disable both
                limitDiv.find('.limit').removeAttr('data-parsley-required').prop('disabled', true).val('');
                limitDiv.find('.limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true).val('');
                limitTextDiv.hide();
                limitDropdownDiv.hide();
            }

        })
        function queryParams(p) {

            return {
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                limit: p.limit,
                search: p.search,

            };
        }

        function chk(checkbox) {
            if (checkbox.checked) {

                active(event.target.id);

            } else {

                disable(event.target.id);
            }
        }
        window.actionEvents = {
            'click .edit_btn': function (e, value, row, index) {
                $("#edit-id").val(row.id);
                $("#edit-name").val(row.name);
                $("#edit-duration").val(30); // Always set to 30 days (hidden field)

                // Set Package Type to Paid (always)
                $("#edit-package-type-paid").prop('checked', true);

                // Show Price Div (as we consider it always paid)
                $("#edit-price-div").show();

                // Only make price required if managed listing is not enabled
                if (row.is_managed_listing != 1) {
                    $('#edit-price').val(row.price).attr('data-parsley-required', true);
                } else {
                    $('#edit-price').val(row.price).removeAttr('data-parsley-required');
                }
                // Show IOS Product ID Div
                $("#edit-ios-product-id-div").show();
                $("#edit-ios-product-id").val(row.ios_product_id);
                // Set Purchase Type
                if (row.purchase_type == 'one_time') {
                    $("#edit-purchase-type-one-time").prop('checked', true);
                } else {
                    $("#edit-purchase-type-unlimited").prop('checked', true);
                }
                // Set Is Managed Listing
                if (row.is_managed_listing == 1) {
                    $("#edit-is_managed_listing").prop('checked', true);
                    // Make price optional when managed listing is enabled (unless it's an add-on)
                    if (row.is_addon != 1) {
                        $('#edit-price').removeAttr('data-parsley-required');
                    }
                } else {
                    $("#edit-is_managed_listing").prop('checked', false);
                    // Make price required if package type is paid and managed listing is disabled, or if it's an add-on
                    if (row.package_type == 'paid' || row.is_addon == 1) {
                        $('#edit-price').attr('data-parsley-required', true);
                    }
                }

                // Handle Add-on checkbox in edit modal
                if (row.is_addon == 1) {
                    console.log('🔧 Initializing add-on edit form', row);

                    $("#edit-is_addon").prop('checked', true);
                    // Disable Lex Managed Listing
                    $('#edit-is_managed_listing').prop('checked', false).prop('disabled', true);
                    // Disable free option
                    $('#edit-package-type-free').prop('disabled', true);
                    // Disable Purchase Type and set to Unlimited
                    $('#edit-purchase-type-unlimited').prop('checked', true).prop('disabled', false).css('pointer-events', 'none');
                    $('#edit-purchase-type-one-time').prop('disabled', true);
                    // Hide duration field for add-ons
                    $("#edit-duration").closest('.form-group').hide();
                    $("#edit-duration").removeAttr('data-parsley-required');
                    // Hide normal price field
                    $("#edit-price-div").hide();
                    $('#edit-price').removeAttr('data-parsley-required');
                    // Show addon pricing section
                    $('.edit-addon-pricing-section').show();
                    // Generate addon pricing rows - this loads the prices
                    generateEditAddonPricingRows(row.id);
                    // Show addon note
                    $('.edit-addon-note').show();

                    // CRITICAL: Aggressively hide Add New Feature button for add-ons
                    $('.edit-add-new-feature').hide().css('display', 'none !important').attr('disabled', true);
                    // Also hide the button's parent container
                    $('.edit-add-new-feature').parent().hide();
                    console.log('🚫 "Add New Feature" button hidden');

                    // Clear all existing feature rows first
                    $('.edit-feature-sections [data-repeater-list] [data-repeater-item]').remove();
                    console.log('🗑️ Cleared existing feature rows');

                    console.log('📦 Package features:', row.package_features);

                    if (row.package_features && row.package_features.length > 0) {
                        let firstFeature = row.package_features[0];
                        console.log('🎯 First feature data:', firstFeature);

                        // Manually add first feature row for add-on
                        let featureRowHtml = `
                                                                    <div class="row edit-feature-section" data-repeater-item>
                                                                        <div class="form-group mandatory col-md-6 col-lg-4">
                                                                            <label>{{ __('Select Feature') }} <span class="text-danger">*</span></label>
                                                                            <select name="feature_data[0][feature_id]" class="form-control form-select edit-features" required disabled>
                                                                                <option value="">{{trans('Select Option')}}</option>
                                                                                @foreach ($featuresList as $feature)
                                                                                    <option value="{{$feature->id}}"
                                                                                        data-type="{{$feature->type ?? ''}}"
                                                                                        data-feature-type="{{$feature->feature_type ?? ''}}"
                                                                                        data-fixed-values="{{$feature->fixed_values ? json_encode($feature->fixed_values) : ''}}"
                                                                                        data-selected-options="{{$feature->selected_options ? json_encode($feature->selected_options) : ''}}">
                                                                                        {{ __($feature->name) }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                            <input type="hidden" name="feature_data[0][feature_id]" class="edit-addon-feature-hidden">
                                                                        </div>
                                                                        <div class="form-group mandatory col-md-6 col-lg-3 edit-package-types">
                                                                            {{ Form::label('', __('Type'), ['class' => 'form-label col-12 ']) }}
                                                                            {{ Form::radio('feature_data[0][type]', 'unlimited', true, ['class' => 'form-check-input edit-feature-type edit-feature-type-unlimited', 'required' => true, 'checked' => true]) }}
                                                                            {{ Form::label('', __('Unlimited'), ['class' => 'form-check-label edit-feature-type-unlimited-label']) }}
                                                                            {{ Form::radio('feature_data[0][type]', 'limited', null, ['class' => 'form-check-input edit-feature-type edit-feature-type-limited', 'required' => true]) }}
                                                                            {{ Form::label('', __('Limited'), ['class' => 'form-check-label edit-feature-type-limited-label']) }}
                                                                        </div>
                                                                        <input type="hidden" name="feature_data[0][type]" class="edit-hidden-type-input" value="limited" disabled style="display: none;">
                                                                        <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-text-div" style="display: none">
                                                                            {{ Form::label('', __('Limited'), ['class' => 'form-label']) }}
                                                                            {!! Form::text('feature_data[0][limit]', '', ['min' => 1, 'class' => 'form-control edit-limit', 'placeholder' => trans('Enter your limit')]) !!}
                                                                        </div>
                                                                        <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-dropdown-div" style="display: none">
                                                                            {{ Form::label('', __('Select Value'), ['class' => 'form-label']) }}
                                                                            <select name="feature_data[0][limit]" class="form-control edit-limit edit-limit-dropdown">
                                                                                <option value="">{{trans('Select Value')}}</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group col-md-1 pl-0 mt-4" style="display: none;">
                                                                            <button data-repeater-delete type="button" class="btn btn-icon btn-danger remove-default-option" title="{{__('Remove Option')}}">
                                                                                <i class="fa fa-times"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                `;

                        $('.edit-feature-sections [data-repeater-list]').append(featureRowHtml);
                        console.log('➕ Appended feature row HTML');

                        // Use multiple timeouts to ensure population happens
                        setTimeout(function () {
                            let firstRow = $('.edit-feature-section').first();
                            console.log('🔍 Looking for feature row, found:', firstRow.length);

                            if (firstRow.length > 0) {
                                console.log('✅ Populating feature row with data:', {
                                    feature_id: firstFeature.feature_id,
                                    limit_type: firstFeature.limit_type,
                                    limit: firstFeature.limit
                                });
                                populateFeatureRow(firstRow, firstFeature);

                                // Double-check the button is still hidden after population
                                setTimeout(function () {
                                    $('.edit-add-new-feature').hide().parent().hide();
                                    console.log('🔒 Re-confirmed button is hidden');
                                }, 100);
                            } else {
                                console.error('❌ Feature row not found in DOM after 300ms!');
                            }
                        }, 300); // Increased to 300ms for more reliable DOM rendering
                    } else {
                        console.warn('⚠️ No package features found for add-on package - showing default Property Limit row');

                        // Use a global mapping or fallback to name check in the DOM
                        let propLimitId = window.propertyLimitFeatureId || 0;
                        if (!propLimitId) {
                            // Try to find it in the dropdown options by text
                            $('#editModal .edit-features option').each(function () {
                                if ($(this).text().toLowerCase().includes('property limit')) {
                                    propLimitId = $(this).val();
                                    return false;
                                }
                            });
                        }

                        // Manually add a blank feature row for add-on
                        let featureRowHtml = `
                                                                    <div class="row edit-feature-section" data-repeater-item>
                                                                        <div class="form-group mandatory col-md-6 col-lg-4">
                                                                            <label>{{ __('Select Feature') }} <span class="text-danger">*</span></label>
                                                                            <select name="feature_data[0][feature_id]" class="form-control form-select edit-features" required disabled>
                                                                                <option value="">{{trans('Select Option')}}</option>
                                                                                @foreach ($featuresList as $feature)
                                                                                    <option value="{{$feature->id}}"
                                                                                        data-type="{{$feature->type ?? ''}}"
                                                                                        data-feature-type="{{$feature->feature_type ?? ''}}"
                                                                                        data-fixed-values="{{$feature->fixed_values ? json_encode($feature->fixed_values) : ''}}"
                                                                                        data-selected-options="{{$feature->selected_options ? json_encode($feature->selected_options) : ''}}">
                                                                                        {{ __($feature->name) }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                            <input type="hidden" name="feature_data[0][feature_id]" class="edit-addon-feature-hidden" value="${propLimitId}">
                                                                        </div>
                                                                        <div class="form-group mandatory col-md-6 col-lg-3 edit-package-types" id="edit-package-types-div">
                                                                            {{ Form::label('', __('Type'), ['class' => 'form-label col-12 ']) }}
                                                                            {{ Form::radio('feature_data[0][type]', 'unlimited', true, ['class' => 'form-check-input edit-feature-type edit-feature-type-unlimited', 'required' => true]) }}
                                                                            {{ Form::label('', __('Unlimited'), ['class' => 'form-check-label edit-feature-type-unlimited-label']) }}
                                                                            {{ Form::radio('feature_data[0][type]', 'limited', null, ['class' => 'form-check-input edit-feature-type edit-feature-type-limited', 'required' => true]) }}
                                                                            {{ Form::label('', __('Limited'), ['class' => 'form-check-label edit-feature-type-limited-label']) }}
                                                                        </div>
                                                                        <input type="hidden" name="feature_data[0][type]" class="edit-hidden-type-input" value="limited" disabled style="display: none;">
                                                                        <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-text-div" style="display: none">
                                                                            {{ Form::label('', __('Limited'), ['class' => 'form-label']) }}
                                                                            {!! Form::text('feature_data[0][limit]', '', ['min' => 1, 'class' => 'form-control edit-limit', 'placeholder' => trans('Enter your limit')]) !!}
                                                                        </div>
                                                                        <div class="col-md-5 col-lg-4 form-group mandatory edit-limit-div edit-limit-dropdown-div" style="display: none">
                                                                            {{ Form::label('', __('Select Value'), ['class' => 'form-label']) }}
                                                                            <select name="feature_data[0][limit]" class="form-control edit-limit edit-limit-dropdown">
                                                                                <option value="">{{trans('Select Value')}}</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                `;

                        $('.edit-feature-sections [data-repeater-list]').append(featureRowHtml);

                        setTimeout(function () {
                            let firstRow = $('.edit-feature-section').first();
                            if (firstRow.length > 0) {
                                // Default Property Limit data
                                let defaultFeat = {
                                    feature_id: propLimitId,
                                    limit_type: 'limited',
                                    limit: ''
                                };
                                populateFeatureRow(firstRow, defaultFeat);
                            }
                        }, 300);
                    }
                } else {
                    $("#edit-is_addon").prop('checked', false);
                    // Re-enable Lex Managed Listing
                    $('#edit-is_managed_listing').prop('disabled', false);
                    // Enable free option
                    $('#edit-package-type-free').prop('disabled', false);
                    // Enable Purchase Type
                    $('#edit-purchase-type-unlimited').prop('disabled', false).css('pointer-events', 'auto');
                    $('#edit-purchase-type-one-time').prop('disabled', false);
                    // Show duration field for regular packages
                    $("#edit-duration").closest('.form-group').show();
                    $("#edit-duration").attr('data-parsley-required', true);
                    // Show normal price field
                    $("#edit-price-div").show();
                    // Hide addon pricing section
                    $('.edit-addon-pricing-section').hide();
                    // Hide addon note
                    $('.edit-addon-note').hide();
                    // Show Add New Feature button
                    $('.edit-add-new-feature').show();
                    // Show remove buttons
                    $('.edit-feature-section').find('.remove-default-option').show();
                    // Enable feature dropdowns
                    $('.edit-features').prop('disabled', false);
                }

                // Handle edit modal add-on checkbox change
                $('#edit-is_addon').off('change').on('change', function () {
                    if ($(this).is(':checked')) {
                        // Disable Lex Managed Listing
                        $('#edit-is_managed_listing').prop('checked', false).prop('disabled', true);

                        // Add-ons must be paid, so set package type to paid and disable free option
                        $('#edit-package-type-paid').prop('checked', true);
                        $('#edit-package-type-free').prop('disabled', true);

                        // Disable Purchase Type and set to Unlimited
                        $('#edit-purchase-type-unlimited').prop('checked', true).prop('disabled', true);
                        $('#edit-purchase-type-one-time').prop('disabled', true);

                        // Hide duration field (add-ons don't expire)
                        $("#edit-duration").closest('.form-group').hide();
                        $("#edit-duration").removeAttr('data-parsley-required');
                        $("#edit-duration").val(0);

                        // Hide normal price field
                        $("#edit-price-div").hide();
                        $('#edit-price').removeAttr('data-parsley-required');
                        $('#edit-price').val('');

                        // Show addon pricing section
                        $('.edit-addon-pricing-section').show();
                        generateEditAddonPricingRows(row.id);

                        // Hide and disable Add New Feature button
                        $('.edit-add-new-feature').hide();

                        // Keep only first feature row and hide remove button
                        $('.edit-feature-section').not(':first').remove();
                        $('.edit-feature-section:first').find('.remove-default-option').hide();

                        // Select property_limit feature and disable dropdown
                        let propertyLimitFeatureId = {{ $featureMapData['property_limit'] ?? 0 }};
                        if (propertyLimitFeatureId) {
                            let firstFeatureRow = $('.edit-feature-section:first');
                            let featureDropdown = firstFeatureRow.find('.edit-features');
                            
                            // Re-enable temporarily to change value
                            featureDropdown.prop('disabled', false);
                            firstFeatureRow.find('.edit-hidden-feature-id').remove();
                            
                            featureDropdown.val(propertyLimitFeatureId).trigger('change');
                            
                            // Add hidden input because disabled fields aren't submitted
                            if (firstFeatureRow.find('input[name="' + featureDropdown.attr('name') + '"][type="hidden"]').length === 0) {
                                firstFeatureRow.append('<input type="hidden" class="edit-hidden-feature-id" name="' + featureDropdown.attr('name') + '" value="' + propertyLimitFeatureId + '">');
                            }
                            
                            // Disable dropdown for UI
                            featureDropdown.prop('disabled', true);
                            
                            console.log('✅ Edit Modal: Property Limit feature selected and locked');
                        }

                        // Show addon note
                        $('.edit-addon-note').show();
                    } else {
                        // Re-enable Lex Managed Listing
                        $('#edit-is_managed_listing').prop('disabled', false);

                        // Re-enable free option
                        $('#edit-package-type-free').prop('disabled', false);

                        // Re-enable Purchase Type
                        $('#edit-purchase-type-unlimited').prop('disabled', false);
                        $('#edit-purchase-type-one-time').prop('disabled', false);

                        // Show duration field
                        $("#edit-duration").closest('.form-group').show();
                        $("#edit-duration").attr('data-parsley-required', true);

                        // Show normal price field
                        $("#edit-price-div").show();

                        // Hide addon pricing section
                        $('.edit-addon-pricing-section').hide();
                        $('#edit-addon-price-list').empty(); // Clear addon price fields to remove validation constraints

                        // Show Add New Feature button
                        $('.edit-add-new-feature').show();

                        // Re-enable feature dropdown and show remove button
                        $('.edit-features').prop('disabled', false);
                        $('.remove-default-option').show();

                        // Hide addon note
                        $('.edit-addon-note').hide();

                        // Reset price requirement based on package type and managed listing
                        if ($('input[name="package_type"]:checked').val() == 'paid' && !$('#edit-is_managed_listing').is(':checked')) {
                            $('#edit-price').attr('data-parsley-required', true);
                        }
                    }
                });

                // Handle edit modal managed listing checkbox change
                $('#edit-is_managed_listing').off('change').on('change', function () {
                    if ($(this).is(':checked')) {
                        // Disable Add-on checkbox (mutual exclusion)
                        $('#edit-is_addon').prop('checked', false).prop('disabled', true);

                        // If managed listing is enabled, make price optional
                        $('#edit-price').removeAttr('data-parsley-required');
                    } else {
                        // Re-enable Add-on checkbox
                        $('#edit-is_addon').prop('disabled', false);

                        // If managed listing is disabled and package type is paid, make price required
                        if ($('input[name="package_type"]:checked').val() == 'paid' || row.package_type == 'paid') {
                            $('#edit-price').attr('data-parsley-required', true);
                        }
                    }
                });
                // Translations
                $(".edit-translations").val("");
                if (row.translations && row.translations.length > 0) {
                    row.translations.forEach(translation => {
                        $("#edit-translation-id-" + translation.language_id).val(translation.id);
                        $("#edit-translation-" + translation.language_id).val(translation.value);
                    });
                }

                // Load existing features
                if (row.is_addon != 1) {
                    // Only load features for non-addon packages
                    setTimeout(function () {
                        loadEditFeatures(row.package_features);
                    }, 100);
                }
                // For add-on packages, the feature is already populated above
            }
        }

        // Function to load features in edit modal
        function loadEditFeatures(packageFeatures) {
            console.log('Loading edit features:', packageFeatures);
            console.log('Number of features:', packageFeatures ? packageFeatures.length : 0);

            // Clear all existing features first
            $('.edit-feature-sections [data-repeater-list] [data-repeater-item]').remove();
            console.log('Cleared existing feature rows');

            if (packageFeatures && packageFeatures.length > 0) {
                packageFeatures.forEach(function (pf, index) {
                    console.log('Processing feature #' + index + ':', pf);
                    // Add a new row for each feature
                    $('.edit-add-new-feature').click();
                    console.log('Clicked add new feature button for index ' + index);

                    // Small delay to ensure row is added to DOM
                    setTimeout(function () {
                        let newRow = $('.edit-feature-sections [data-repeater-list] [data-repeater-item]').eq(index);
                        console.log('Found row for index ' + index + ':', newRow.length > 0);
                        if (newRow.length > 0) {
                            populateFeatureRow(newRow, pf);
                        }
                    }, 100 * (index + 1));
                });
            } else {
                console.log('No features found, adding empty row');
                // No features, add one empty row
                $('.edit-add-new-feature').click();
            }

            setTimeout(function () {
                console.log('Checking for duplicate features');
                checkDuplicateFeatures('.edit-features', '.edit-add-new-feature');
            }, (packageFeatures ? packageFeatures.length * 100 : 0) + 300);
        }

        function populateFeatureRow(row, packageFeature) {

            // Set feature dropdown
            row.find('.edit-features').val(packageFeature.feature_id);
            row.find('.edit-addon-feature-hidden').val(packageFeature.feature_id);

            // Manually trigger the feature selection logic
            let selectedOption = row.find('.edit-features option:selected');
            let featureType = selectedOption.attr('data-feature-type');
            let fixedValues = null;
            let selectedOptions = null;

            try {
                let fixedValuesStr = selectedOption.attr('data-fixed-values');
                if (fixedValuesStr && fixedValuesStr !== '') {
                    fixedValues = JSON.parse(fixedValuesStr);
                }
            } catch (e) { }

            try {
                let selectedOptionsStr = selectedOption.attr('data-selected-options');
                if (selectedOptionsStr && selectedOptionsStr !== '') {
                    selectedOptions = JSON.parse(selectedOptionsStr);
                }
            } catch (e) { }

            let packageTypesDiv = row.find('.edit-package-types');
            let limitTextDiv = row.find('.edit-limit-text-div');
            let limitDropdownDiv = row.find('.edit-limit-dropdown-div');
            let limitDropdown = row.find('.edit-limit-dropdown');
            let limitTextInput = row.find('.edit-limit-text-div .edit-limit');

            let featureName = selectedOption.text();
            let featureGroup = getFeatureGroup(selectedOption.attr('data-type'));

            // Reset
            limitTextDiv.hide();
            limitDropdownDiv.hide();
            limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');

            let limRadio = row.find('.edit-feature-type-limited');
            let limLabel = row.find('.edit-feature-type-limited-label');
            let unlimRadio = row.find('.edit-feature-type-unlimited');
            let unlimLabel = row.find('.edit-feature-type-unlimited-label');

            limRadio.show();
            limLabel.show();
            unlimRadio.show();
            unlimLabel.show();

            if (featureGroup === 'always_unlimited') {
                packageTypesDiv.hide();
                row.find('.edit-hidden-type-input').val('unlimited').prop('disabled', false);
                limRadio.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                limLabel.hide();
                unlimRadio.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                unlimLabel.hide();
            } else if (featureGroup === 'type_with_numeric') {
                packageTypesDiv.show();
                row.find('.edit-hidden-type-input').prop('disabled', true);
                limRadio.attr('required', true).prop('disabled', false).show();
                limLabel.show();
                unlimRadio.prop('disabled', false).show();
                unlimLabel.show();
                limitTextInput.attr('type', 'number').attr('min', '1').attr('step', '1');
            } else if (featureGroup === 'always_limited_dropdown') {
                packageTypesDiv.hide();
                row.find('.edit-hidden-type-input').val('limited').prop('disabled', false);
                limRadio.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                limLabel.hide();
                unlimRadio.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                unlimLabel.hide();
                if (fixedValues && fixedValues.length > 0) {
                    limitDropdownDiv.show();
                    limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');
                    fixedValues.forEach(function (value) {
                        limitDropdown.append('<option value="' + value + '">' + value + '</option>');
                    });
                    limitDropdown.prop('disabled', false);
                }
            } else if (featureType === 'fixed_value') {
                packageTypesDiv.show();
                row.find('.edit-hidden-type-input').prop('disabled', true);
                limRadio.prop('disabled', false).show();
                unlimRadio.prop('disabled', false).show();
                if (fixedValues && fixedValues.length > 0) {
                    fixedValues.forEach(function (value) {
                        limitDropdown.append('<option value="' + value + '">' + value + '</option>');
                    });
                }
            } else if (featureType === 'selected_based') {
                packageTypesDiv.hide();
                row.find('.edit-hidden-type-input').val('limited').prop('disabled', false);
                limRadio.prop('disabled', true).prop('checked', false).hide();
                limLabel.hide();
                unlimRadio.prop('disabled', true).prop('checked', false).hide();
                unlimLabel.hide();

                if (selectedOptions && selectedOptions.length > 0) {
                    limitDropdownDiv.show();
                    limitDropdown.empty();
                    selectedOptions.forEach(function (option) {
                        limitDropdown.append('<option value="' + option + '">' + option + '</option>');
                    });
                }
            } else {
                packageTypesDiv.show();
                row.find('.edit-hidden-type-input').prop('disabled', true);
                row.find('.edit-feature-type-limited').prop('disabled', false).show();
                row.find('.edit-feature-type-unlimited').prop('disabled', false).show();
            }

            // Set limit type and value
            setTimeout(function () {
                if (featureGroup === 'always_unlimited') {
                    row.find('.edit-hidden-type-input').val('unlimited').prop('disabled', false);
                    limitTextDiv.hide();
                    limitDropdownDiv.hide();
                    return;
                }
                if (featureGroup === 'always_limited_dropdown') {
                    row.find('.edit-hidden-type-input').val('limited').prop('disabled', false);
                    if (limitDropdown.find('option[value="' + packageFeature.limit + '"]').length > 0) {
                        limitDropdownDiv.show();
                        limitDropdown.val(packageFeature.limit).prop('disabled', false).attr('data-parsley-required', true);
                        limitTextDiv.hide();
                        limitTextInput.prop('disabled', true).removeAttr('data-parsley-required');
                    } else {
                        limitTextDiv.show();
                        limitTextInput.val(packageFeature.limit).prop('disabled', false).attr('data-parsley-required', true);
                        limitDropdownDiv.hide();
                        limitDropdown.prop('disabled', true).removeAttr('data-parsley-required');
                    }
                    return;
                }
                if (featureGroup === 'type_with_numeric') {
                    if (packageFeature.limit_type === 'unlimited') {
                        row.find('.edit-feature-type-unlimited').prop('checked', true);
                        limitTextDiv.hide();
                        limitDropdownDiv.hide();
                        limitTextInput.prop('disabled', true).removeAttr('data-parsley-required');
                    } else {
                        row.find('.edit-feature-type-limited').prop('checked', true);
                        limitTextDiv.show();
                        limitTextInput.val(packageFeature.limit).attr('type', 'number').attr('min', '1').attr('step', '1').prop('disabled', false).attr('data-parsley-required', true);
                        limitDropdownDiv.hide();
                        limitDropdown.prop('disabled', true).removeAttr('data-parsley-required');
                    }
                    return;
                }

                if (packageFeature.limit_type === 'unlimited') {
                    row.find('.edit-feature-type-unlimited').prop('checked', true);
                    limitTextDiv.hide();
                    limitDropdownDiv.hide();
                } else {
                    row.find('.edit-feature-type-limited').prop('checked', true);

                    if (featureType === 'fixed_value' || featureType === 'selected_based') {
                        if (limitDropdown.find('option[value="' + packageFeature.limit + '"]').length > 0) {
                            limitDropdownDiv.show();
                            limitDropdown.val(packageFeature.limit).prop('disabled', false).attr('data-parsley-required', true);
                            limitTextDiv.hide();
                            limitTextInput.prop('disabled', true).removeAttr('data-parsley-required');
                        } else {
                            limitTextDiv.show();
                            limitTextInput.val(packageFeature.limit).prop('disabled', false).attr('data-parsley-required', true);
                            limitDropdownDiv.hide();
                            limitDropdown.prop('disabled', true).removeAttr('data-parsley-required');
                        }
                    } else {
                        limitTextDiv.show();
                        limitTextInput.val(packageFeature.limit).prop('disabled', false).attr('data-parsley-required', true);
                        limitDropdownDiv.hide();
                        limitDropdown.prop('disabled', true).removeAttr('data-parsley-required');
                    }
                }
            }, 150);
        }

        // Handle edit features change
        $(document).on('change', '.edit-features', function (e) {
            let value = $(this).val();

            if (!value || value === '') {
                let packageTypesDiv = $(this).parent().parent().find('.edit-package-types');
                let limitTextDiv = $(this).parent().parent().find('.edit-limit-text-div');
                let limitDropdownDiv = $(this).parent().parent().find('.edit-limit-dropdown-div');
                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');

                packageTypesDiv.show();
                limitTextDiv.hide();
                limitDropdownDiv.hide();
                hiddenTypeInput.prop('disabled', true);

                let limitRadioElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-limited');
                let unlimitedRadioElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-unlimited');
                let limitRadioLabelElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-limited-label');
                let unlimitedRadioLabelElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-unlimited-label');
                limitRadioElement.show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show();
                unlimitedRadioLabelElement.show();
                limitRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('disabled', false).prop('checked', true);

                checkDuplicateFeatures('.edit-features', '.edit-add-new-feature');
                return;
            }

            let selectedOption = $(this).find('option:selected');
            let featureType = selectedOption.data('feature-type');

            let fixedValues = null;
            let selectedOptions = null;
            try {
                let fixedValuesStr = selectedOption.attr('data-fixed-values');
                if (fixedValuesStr && fixedValuesStr !== '') {
                    fixedValues = JSON.parse(fixedValuesStr);
                }
            } catch (e) {
                fixedValues = null;
            }
            try {
                let selectedOptionsStr = selectedOption.attr('data-selected-options');
                if (selectedOptionsStr && selectedOptionsStr !== '') {
                    selectedOptions = JSON.parse(selectedOptionsStr);
                }
            } catch (e) {
                selectedOptions = null;
            }

            checkDuplicateFeatures('.edit-features', '.edit-add-new-feature');

            let packageTypesDiv = $(this).parent().parent().find('.edit-package-types');
            let limitRadioElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-limited');
            let limitRadioLabelElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-limited-label');
            let unlimitedRadioElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-unlimited');
            let unlimitedRadioLabelElement = $(this).parent().parent().find('.edit-package-types').find('.edit-feature-type-unlimited-label');

            let limitTextDiv = $(this).parent().parent().find('.edit-limit-text-div');
            let limitDropdownDiv = $(this).parent().parent().find('.edit-limit-dropdown-div');
            let limitDropdown = $(this).parent().parent().find('.edit-limit-dropdown');
            let limitTextInput = $(this).parent().parent().find('.edit-limit-text-div .edit-limit');

            let editFeatureName = selectedOption.text();
            let editFeatureGroup = getFeatureGroup(selectedOption.attr('data-type'));

            packageTypesDiv.show();
            limitTextDiv.hide();
            limitDropdownDiv.hide();
            limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');
            limitTextInput.val('').prop('disabled', true);
            limitDropdown.prop('disabled', true);

            limitRadioElement.show();
            limitRadioLabelElement.show();
            unlimitedRadioElement.show();
            unlimitedRadioLabelElement.show();

            if (editFeatureGroup === 'always_unlimited') {
                packageTypesDiv.hide();
                limitTextDiv.hide();
                limitDropdownDiv.hide();
                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.val('unlimited').prop('disabled', false);
                limitRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                unlimitedRadioLabelElement.hide();
            } else if (editFeatureGroup === 'type_with_numeric') {
                packageTypesDiv.show();
                limitRadioElement.attr('required', true).show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show().prop('disabled', false);
                unlimitedRadioLabelElement.show();
                unlimitedRadioElement.prop('checked', true);

                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.prop('disabled', true);

                limitRadioElement.prop('disabled', false).show();
                limitTextDiv.hide();
                limitTextInput.attr('type', 'number').attr('min', '1').attr('step', '1');
                limitDropdown.removeAttr('data-parsley-required');
                limitTextInput.removeAttr('data-parsley-required');
                limitDropdown.prop('disabled', true);
                unlimitedRadioElement.prop('checked', true).click();
            } else if (editFeatureGroup === 'always_limited_dropdown') {
                packageTypesDiv.hide();
                limitDropdownDiv.show();
                limitTextDiv.hide();

                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.val('limited').prop('disabled', false);
                limitRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.removeAttr('required').prop('disabled', true).prop('checked', false).hide();
                unlimitedRadioLabelElement.hide();

                if (fixedValues && fixedValues.length > 0) {
                    limitDropdown.empty().append('<option value="">{{trans("Select Value")}}</option>');
                    fixedValues.forEach(function (value) {
                        limitDropdown.append('<option value="' + value + '">' + value + '</option>');
                    });
                    limitDropdown.attr('data-parsley-required', 'true').prop('disabled', false);
                } else {
                    limitDropdown.removeAttr('data-parsley-required').prop('disabled', true);
                }
                limitTextInput.removeAttr('data-parsley-required').prop('disabled', true);
            } else if (featureType === 'fixed_value') {
                packageTypesDiv.show();
                limitRadioElement.attr('required', true).show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show();
                unlimitedRadioLabelElement.show();

                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.prop('disabled', true);

                limitRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('checked', true).click();

                limitDropdown.removeAttr('data-parsley-required');
                limitTextInput.removeAttr('data-parsley-required');
                limitTextInput.prop('disabled', true);

                if (fixedValues && fixedValues.length > 0) {
                    limitDropdown.prop('disabled', false);
                    fixedValues.forEach(function (value) {
                        limitDropdown.append('<option value="' + value + '">' + value + '</option>');
                    });
                } else {
                    limitDropdown.prop('disabled', true);
                }
            } else if (featureType === 'selected_based') {
                packageTypesDiv.hide();
                limitRadioElement.removeAttr('required');
                unlimitedRadioElement.removeAttr('required');

                limitRadioElement.hide();
                limitRadioLabelElement.hide();
                unlimitedRadioElement.hide();
                unlimitedRadioLabelElement.hide();

                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.val('limited').prop('disabled', false);

                limitRadioElement.prop('disabled', true).prop('checked', false);
                unlimitedRadioElement.prop('disabled', true).prop('checked', false);

                if (selectedOptions && selectedOptions.length > 0) {
                    limitDropdownDiv.show();
                    limitTextDiv.hide();

                    limitDropdown.empty();
                    selectedOptions.forEach(function (option, index) {
                        limitDropdown.append('<option value="' + option + '">' + option + '</option>');
                    });

                    if (selectedOptions.length > 0) {
                        limitDropdown.val(selectedOptions[0]).prop('disabled', false);
                    }

                    limitDropdown.attr('data-parsley-required', true).prop('disabled', false);
                    limitTextInput.removeAttr('data-parsley-required').prop('disabled', true);
                } else {
                    limitDropdownDiv.hide();
                    limitTextDiv.hide();
                    limitDropdown.removeAttr('data-parsley-required');
                }
            } else {
                packageTypesDiv.show();
                limitRadioElement.attr('required', true).show();
                limitRadioLabelElement.show();
                unlimitedRadioElement.show();
                unlimitedRadioLabelElement.show();

                let hiddenTypeInput = $(this).parent().parent().find('.edit-hidden-type-input');
                hiddenTypeInput.prop('disabled', true);

                limitRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('disabled', false);
                unlimitedRadioElement.prop('checked', true).click();

                limitTextInput.removeAttr('data-parsley-required');
                limitDropdown.removeAttr('data-parsley-required');
                limitTextInput.prop('disabled', true);
                limitDropdown.prop('disabled', true);
                limitTextDiv.hide();
                limitDropdownDiv.hide();
            }
        });

        // Handle edit feature type change
        $(document).on('change', '.edit-feature-type', function (e) {
            let value = $(this).val();
            let featureSelect = $(this).closest('.edit-feature-section').find('.edit-features');
            let selectedOption = featureSelect.find('option:selected');
            let featureType = null;

            try {
                featureType = selectedOption.attr('data-feature-type');
            } catch (e) {
                featureType = null;
            }

            let limitDiv = $(this).closest('.edit-feature-section').find('.edit-limit-div');
            let limitTextDiv = $(this).closest('.edit-feature-section').find('.edit-limit-text-div');
            let limitDropdownDiv = $(this).closest('.edit-feature-section').find('.edit-limit-dropdown-div');

            let editFg = getFeatureGroup(selectedOption.attr('data-type'));

            // if (featureType === 'selected_based') {
            //     return;
            // }

            if (editFg === 'always_unlimited' || editFg === 'always_limited_dropdown') {
                return;
            }

            if (value == 'limited') {
                if (editFg === 'type_with_numeric') {
                    limitTextDiv.show();
                    limitTextDiv.find('.edit-limit').attr('type', 'number').attr('min', '1').attr('step', '1').attr('data-parsley-required', true).prop('disabled', false);
                    limitDropdownDiv.hide();
                    limitDropdownDiv.find('.edit-limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true);
                    return;
                }
                if (limitDropdownDiv.find('.edit-limit-dropdown option').length > 1) {
                    limitDropdownDiv.show();
                    limitDropdownDiv.find('.edit-limit-dropdown').attr('data-parsley-required', true).prop('disabled', false);
                    limitTextDiv.hide();
                    limitTextDiv.find('.edit-limit').removeAttr('data-parsley-required').prop('disabled', true);
                } else {
                    limitTextDiv.show();
                    limitTextDiv.find('.edit-limit').attr('data-parsley-required', true).prop('disabled', false);
                    limitDropdownDiv.hide();
                    limitDropdownDiv.find('.edit-limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true);
                }
            } else {
                limitDiv.find('.edit-limit').removeAttr('data-parsley-required').prop('disabled', true).val('');
                limitDiv.find('.edit-limit-dropdown').removeAttr('data-parsley-required').prop('disabled', true).val('');
                limitTextDiv.hide();
                limitDropdownDiv.hide();
            }
        });

        // Formatter for Add-on Type
        function addonTypeFormatter(value, row, index) {
            if (row.is_addon == 1) {
                return '<span class="badge bg-info">Add-on</span>';
            }
            return '<span class="badge bg-secondary">Regular</span>';
        }
    </script>

    <script>
        window.onload = function () {

            $('#limitation_for_property').hide();

            $('#limitation_for_advertisement').hide();
            $('.limitations').hide();

        }


        $('input[type="radio"][name="package_type"]').click(function () {
            if ($(this).is(':checked')) {
                if ($(this).val() == 'product_listing') {
                    $('.limitations').show();
                } else {
                    $('.limitations').hide();

                }
            }

        });

        $('input[type="radio"][name="typep"]').click(function () {


            if ($(this).is(':checked')) {
                if ($(this).val() == 'add_limited_property') {
                    $('#limitation_for_property').show();
                    $('#propertylimit').attr('required', 'true');
                } else {
                    $('#limitation_for_property').hide();
                    $('#propertylimit').removeAttr('required');
                }
            }
        });
        $('input[type="radio"][name="typel"]').click(function () {

            if ($(this).is(':checked')) {
                if ($(this).val() == 'add_limited_advertisement') {

                    $('#limitation_for_advertisement').show();
                    $('#advertisementlimit').attr("required", "true");
                } else {
                    $('#limitation_for_advertisement').hide();
                    $('#advertisementlimit').removeAttr("required");
                }
            }
        });


        function disable(id) {
            $.ajax({
                url: "{{ route('package.updatestatus') }}",
                type: "POST",
                data: {
                    '_token': "{{ csrf_token() }}",
                    "id": id,
                    "status": 0,
                },
                cache: false,
                success: function (result) {
                    let text = '{{ trans("Package OFF Successfully") }}';
                    if (result.error == false) {
                        Toastify({
                            text: text,
                            duration: 6000,
                            close: !0,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
                        }).showToast();
                        $('#table_list').bootstrapTable('refresh');
                    } else {
                        Toastify({
                            text: result.message,
                            duration: 6000,
                            close: !0,
                            backgroundColor: '#dc3545' //"linear-gradient(to right, #dc3545, #96c93d)"

                        }).showToast();
                        $('#table_list').bootstrapTable('refresh');
                    }

                },
                error: function (error) {

                }
            });
        }

        function active(id) {
            $.ajax({
                url: "{{ route('package.updatestatus') }}",
                type: "POST",
                data: {
                    '_token': "{{ csrf_token() }}",
                    "id": id,
                    "status": 1,
                },
                cache: false,
                success: function (result) {

                    if (result.error == false) {
                        let text = '{{ trans("Package On Successfully") }}';
                        Toastify({
                            text: text,
                            duration: 6000,
                            close: !0,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
                        }).showToast();
                        $('#table_list').bootstrapTable('refresh');
                    } else {
                        Toastify({
                            text: result.message,
                            duration: 6000,
                            close: !0,
                            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
                        }).showToast();
                        $('#table_list').bootstrapTable('refresh');
                    }

                },
                error: function (error) {

                }
            });
        }

        let formSuccessFunction = () => {
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        }
    </script>

    <style>
        /* Force hide Add New Feature button when modal has add-on content */
        .edit-addon-pricing-section:not([style*="display: none"])~div .edit-add-new-feature,
        .edit-addon-pricing-section:not([style*="display: none"])~* .edit-add-new-feature {
            display: none !important;
        }
    </style>
@endsection