{% extends '@Axisubs/Admin/tabs/tab.twig' %}

{% block body %}
    <div class="axisubs axisubs-bs3 wrap">
        <h2>{{ pagetitle }}
        </h2>
        <form name="planForm" id="planForm" method="post" action="?page=plans-index" onsubmit="return validatePlan();">
            {% if(item['meta'][item['ID']~'_axisubs_plans_slug_stripe'] != '') %}
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="updated notice-warning"><p>{{ esc_html_e('Few fields cannot be editable, Stripe doesn\'t allows to edit plan price and durations.', 'axis-subscriptions') }}</p></div>
                </div>
            </div>
            {% endif %}
            <div class="container-fluid">
                <div class="row-fluid">
                    {% if(item['ID'] > 0) %}
                    {% set planID = item['ID'] %}
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 edit-plan">
                        {% else %}
                        {% set planID = 0 %}
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                            {% endif %}
                            <div id="axisubs_plan_create_step_1" {% if(planID > 0) %} class="hide" {% endif %}>
                                <div class="axisubs-fields">
                                    <div class="axisubs-fields-label">
                                        <label for="axisub_plan_type">Select plan type</label>
                                    </div>
                                    <div class="axisubs-fields-content">
                                        <select name="axisubs[plans][type]" id="axisub_plan_type" onchange="loadFieldsOfPlanType(this.value, '{{ item['ID'] }}')">
                                            <option value="free" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'free' %} selected {% endif %}>Free</option>
                                            <!--<option value="non_renewal" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'non_renewal' %} selected {% endif %}>Non Renewal</option>-->
                                            <option value="renewal" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'renewal' %} selected {% endif %}>Non-recurring</option>
                                            <option value="renewal_with_trial" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'renewal_with_trial' %} selected {% endif %}>Non-recurring with trial</option>
                                            <option value="recurring" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'recurring' %} selected {% endif %}>Recurring</option>
                                            <option value="recurring_with_trial" {% if item['meta'][item['ID']~'_axisubs_plans_type'] == 'recurring_with_trial' %} selected {% endif %}>Recurring with trial</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="axisubs-fields">
                                    <div class="axisubs-fields-label">
                                    </div>
                                    <div class="axisubs-fields-content">
                                        <button class="button plan_step_2 button-primary" type="button">Next</button>
                                        <a href="?page=plans-index" class="button" >Cancel</a>
                                    </div>
                                </div>
                            </div>
                            <div id="axisubs_plan_create_step_2" {% if(planID <= 0) %} class="hide" {% endif %}>
                                <div class="tab-container">
                                    <div class="nav-tabs-container">
                                        <ul class="nav nav-tabs">
                                            <li role="basic" class="active tab_axisubs"><a data-toggle="tab" href="#basic">Plan Details</a></li>
                                            <li role="durations" class="tab_axisubs"><a data-toggle="tab" href="#durations">Duration and Prices</a></li>
                                            <li role="roles" class="tab_axisubs"><a data-toggle="tab" href="#roles">Add/Remove Roles</a></li>
                                        </ul>
                                    </div>
                                    <div class="axisubs-fields-con tab-content">
                                        <div id="basic" class="tab-pane fade in active">
                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_name">Plan Name</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    <input type="text" class="required" name="axisubs[plans][name]" id="axisub_plan_name" value="{{ item['meta'][item['ID']~'_axisubs_plans_name'] }}"/>
                                                    <span class="help-text">A descriptive name for this plan. Please note that this will be displayed to customers.</span>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_status">Status</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    <select name="axisubs[plans][status]" id="axisub_plan_status" >
                                                        <option value="1" {% if item['meta'][item['ID']~'_axisubs_plans_status'] == '1' %} selected {% endif %}>Enabled</option>
                                                        <option value="0" {% if item['meta'][item['ID']~'_axisubs_plans_status'] == '0' %} selected {% endif %}>Disabled</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_slug">Alias</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    <input type="text" class="required" name="axisubs[plans][slug]" id="axisub_plan_slug" value="{{ item['meta'][item['ID']~'_axisubs_plans_slug'] }}"/>
                                                    <span class="help-text">Unique identifier used in hosted page URLs and API calls.</span>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_image">Image</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    {% if(item['meta'][item['ID']~'_axisubs_plans_image'] != '') %}
                                                        {% set classUploadImg = 'show' %}
                                                        {% set imagePath = item['meta'][item['ID']~'_axisubs_plans_image'] %}
                                                    {% else %}
                                                        {% set classUploadImg = 'hide' %}
                                                        {% set imagePath = data['plugin_url']~'/resources/assets/images/ico_noimage.png' %}
                                                    {% endif %}
                                                    <button type="button" class="upload_image_button">Browse Image</button>
                                                    <img class="upload_image_preview" src="{{ imagePath }}" />
                                                    <button type="button" data-path="{{ data['plugin_url'] }}/resources/assets/images/ico_noimage.png" class="upload_image_button_close {{ classUploadImg }}">X</button>
                                                    <input type="hidden" name="axisubs[plans][image]" id="axisub_plan_image" value="{{ item['meta'][item['ID']~'_axisubs_plans_image'] }}"/>
                                                    <input type="hidden" name="axisubs[plans][image_attachment_id]" id="axisub_plan_image_attachment_id" value="{{ item['meta'][item['ID']~'_axisubs_plans_image_attachment_id'] }}"/>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_description">Description</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    {{ data['plan_description_editor'] | raw }}
                                                    <span class="help-text">Description about the plan to show in the customer portal when users change their subscription.</span>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields hide">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_payment_plugins">Payment Plugins</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    {% set paymentPlugins = item['meta'][item['ID']~'_axisubs_plans_payment_plugins']|split(',') %}
                                                    <select name="axisubs[plans][payment_plugins][]" id="axisub_plan_payment_plugins" multiple size="5">
                                                        {% for key, payment_plugins in data['payment_plugins'] %}
                                                            <option value="{{ payment_plugins['pluginFolder'] }}" {% if payment_plugins['pluginFolder'] in paymentPlugins %} selected {% endif %}>{{ payment_plugins['Name'] }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span class="help-text">If not selected, it list all payment plugins in front end.</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="durations" class="tab-pane fade">
                                            <div class="axisubs-fields-label">
                                                <label for="axisub_plan_status">Plan Type</label>
                                            </div>
                                            <div class="axisubs-fields-content plan_type_value_text">
                                                {{ data['plan_type_text'] }}
                                            </div>
                                            <div class="axisubs-fields-plantypes-con-o loader-ajax-o">
                                                <div class="loader-ajax"></div>
                                                <div class="axisubs-fields-plantypes-c">
                                                </div>
                                            </div>
                                        </div>
                                        <div id="roles" class="tab-pane fade">
                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_add_roles">Add Role</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    {% set add_roles = item['meta'][item['ID']~'_axisubs_plans_add_roles']|split(',') %}
                                                    <select name="axisubs[plans][add_roles][]" class="widget-hot-topics add_remove" id="axisub_plan_add_roles" multiple size="5">
                                                        {% for key, role_name in role_names %}
                                                            <option value="{{ key }}" {% if key in add_roles %} selected {% endif %}>{{ role_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span class="help-text">Users will be added to these WordPress! User roles when their subscription to this level is enabled.</span>
                                                </div>
                                            </div>

                                            <div class="axisubs-fields">
                                                <div class="axisubs-fields-label">
                                                    <label for="axisub_plan_remove_roles">Remove Role</label>
                                                </div>
                                                <div class="axisubs-fields-content">
                                                    {% set add_roles = item['meta'][item['ID']~'_axisubs_plans_remove_roles']|split(',') %}
                                                    <select class="add_remove" name="axisubs[plans][remove_roles][]" id="axisub_plan_remove_roles" multiple size="5">
                                                        {% for key, role_name in role_names %}
                                                            <option value="{{ key }}" {% if key in add_roles %} selected {% endif %}>{{ role_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <span class="help-text">Users will be removed from these WordPress! User roles when their subscription to this level is disabled.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="axisubs-fields-con">
                                    <div class="axisubs-fields">
                                        <div class="axisubs-fields-label">
                                            <input type="hidden" name="task" id="task" value="save"/>
                                            <input type="hidden" name="post_type" value="axisubs_plans"/>
                                            <input type="hidden" name="id" value="{{ item['ID'] }}"/>
                                        </div>
                                        <div class="axisubs-fields-content page-btn">
                                            {% if(planID <= 0) %}
                                                <button class="button plan_step_1" type="button">Previous</button>
                                            {% endif %}
                                            <button class="button button-primary" type="submit">Save</button>
                                            <button class="button axisubs_save_close" type="button">Save & Close</button>
                                            <a href="?page=plans-index" class="button" >Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" id="site_url" value="{{ site_url }}"/>
                            {{ data['payment_additional_data'] | raw }}
                        </div>
                        {% if(item['ID'] > 0) %}
                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 plan-shortcodes">
                                <div class="axisubs-fields-con">
                                    <h3>Shortcodes</h3>
                                    [AxisubsSelectedPlans id={{ item['ID'] }}] <span class="help-text">- Helps to load this Plan using plan id</span>
                                    [AxisubsPlanPrice id={{ item['ID'] }}] <span class="help-text">- Helps to load Plan Price</span>
                                    [AxisubsPlanImage id={{ item['ID'] }}] <span class="help-text">- Helps to load Plan Image</span>
                                    [AxisubsSubscribeButton id={{ item['ID'] }}] <span class="help-text">- Helps to load Subscribe button</span>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </form>
        <script>
            (function ($) {
                $(document).ready(function () {
                    loadFieldsOfPlanType('{{ item['meta'][item['ID']~'_axisubs_plans_type'] }}', '{{ item['ID'] }}');
                });
            })(jQuery);
        </script>
    </div>
{% endblock %}