{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_rank_settings' %}
{% set blockValue = 1 %}
{% set banifitesValue = 1 %}
{% if rankSettingData is not empty %}
   {% set rankSettingDataJSON = rankSettingData %} 
{% endif %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Rank Management',
    }
]%}

{% block stylesheets %}
<link href="{{ asset('assets/css/admin/rank_setting.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block content %}
{% if errors is not empty %}
    <div class="alert alert-danger">
        <ul>
            {% for errorBlcoks in errors %}
                {% for error in errorBlcoks %}
                    <li>{{ error }}</li>
                {% endfor %}
            {% endfor %}
        </ul>
    </div>
{% endif %}
<form id="rank-setting-form" method="post" action="{{ path('app_admin_rank_settings')}}">
    {% if rankSettingData is not empty%}
        {% for key, value in rankSettingData %}
            {% set blockValue = key + 1 %}
            <div class="card main-card" id="block_{{blockValue}}">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 id="set_level_{{blockValue}}">Set Level {{blockValue}}</h3>
                            <input type="hidden" name="rank[{{blockValue}}][level]" value="{{blockValue}}">
                        </div>
                        <div class="col-md-6 text-right">
                            {% set displayAddButtonStyle = loop.last ? '' : 'display: none;' %}
                            {# {% if not loop.first %}  #}
                                <a href="#" id="delete_block_{{ blockValue }}" class="btn btn-danger delete-button" style="float:right; {{ displayAddButtonStyle }}"><i class="ph ph-trash"></i></a>
                            {# {% endif %} #}
                            <a href="#" id="add_button_{{ blockValue }}" class="btn btn-primary add-button" style="{{ displayAddButtonStyle }}; margin-right:5px; float:right;"><i class="ph ph-plus-circle"></i></a>
                        </div>
                    </div>
                    <div class="level">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="mt-3">Level Name</h6>
                                <input type="text" id="level_name_{{blockValue}}" name="rank[{{blockValue}}][level_name]" value="{{value.getLevelName}}" class="form-control">
                            </div>
                            <div class="col-md-6">
                                {% set categoryTask = value.getCategoryTask %}
                                <div>
                                    <h6 class="mt-3">Select Task</h6>
                                    <select name="rank[{{blockValue}}][task][]" multiple="multiple" data-placeholder="Enter tags" class="form-control form-control-select2-icons" id="category_{{blockValue}}">
                                        <optgroup label="Marketing Tasks" id="marketing_task">
                                            <option value="connect_instagram" {% if "connect_instagram" in categoryTask %} selected {% endif %} >Connect Instagram</option>
                                            <option value="join_trello" {% if "join_trello" in categoryTask %} selected {% endif %} >Join Trello Board</option>
                                            <option value="answer_question" {% if "answer_question" in categoryTask %} selected {% endif %} >Answer Question</option>
                                        </optgroup>
                                        <optgroup label="Sales Tasks" id="sale_task">
                                            <option value="direct_on_board" {% if "direct_on_board" in categoryTask %} selected {% endif %} >Direct On Board Member</option>
                                            <option value="level_on_board" {% if "level_on_board" in categoryTask %} selected {% endif %} >On Board Level Member</option>
                                            <option value="get_sales" {% if "get_sales" in categoryTask %} selected {% endif %} >Get Sales</option>
                                        </optgroup>
                                        <optgroup label="Revenue Tasks" id="revenue_task">
                                            <option value="direct_revenue" {% if "direct_revenue" in categoryTask %} selected {% endif %} >Direct Revenue</option>
                                            <option value="team_revenue" {% if "team_revenue" in categoryTask %} selected {% endif %} >Team Revenue</option>
                                        </optgroup>
                                        <optgroup label="Review Tasks" id="review_task">
                                            <option value="client_review" {% if "client_review" in categoryTask %} selected {% endif %} >Client Review</option>
                                            <option value="partner_review" {% if "partner_review" in categoryTask %} selected {% endif %} >Partner Review</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        <div class="col-md-6">
                                <h6 class="mt-3">Bonus Payout</h6>
                                <div class="form-control-feedback form-control-feedback-end mb-3">
                                    <input type="number" id="level_bonus_payout_{{blockValue}}" name="rank[{{blockValue}}][bonus_payout]" value="{{ value.getCommissionBounus }}" class="form-control">
                                    <div class="form-control-feedback-icon form-control-feedback-icon-lg">
                                        <i class="ph ph-percent ph-lg"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                {% set benefitsValueData = value.getBenefits %}
                                <h6 class="mt-3">Benefits</h6>
                                <div class="mb-3">
                                    <div class="banefits-container" id="banefits_container_{{blockValue}}">
                                    {% for benefitesKey,benefitesValue in benefitsValueData %}
                                        <!-- Rule template goes here -->
                                        <div class="banefits" id="banefits_{{blockValue}}_{{benefitesKey}}">
                                            <div class="row mt-2">
                                                <div class="col-md-9">
                                                    <input type="text" id="level_banefits_{{blockValue}}_{{benefitesKey}}" name="rank[{{blockValue}}][benefits][{{benefitesKey}}]" value="{{benefitesValue}}" class="form-control">
                                                </div>
                                                <div class="col-md-3 add-and-remove" id="add_and_remove_{{blockValue}}_{{benefitesKey}}">
                                                    {% if loop.last %}
                                                        <a href="#" type="button" class="btn btn-primary add-banefites" id="add_banefites_{{ blockValue }}_{{ benefitesKey }}" title="Add Benefites"><i class="ph ph-plus-circle"></i></a>
                                                    {% endif %}

                                                    {% if not loop.first %}
                                                        <a href="#" type="button" class="btn btn-danger remove-banefites" id="remove_banefites_{{ blockValue }}_{{ benefitesKey }}" title="Remove Benefites" style="margin-left:3px;"><i class="ph ph-trash"></i></a>
                                                    {% endif %}
                                                    
                                                    <!-- Remove Benefites button -->
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="card child-card mt-3" id="marketing_task_card_{{blockValue}}">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md">
                                                <h4 id="marketing_task_label_{{blockValue}}"></h4>
                                                <div class="row" id="marketing_task_div_{{blockValue}}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-3 child-card" id="sales_task_card_{{blockValue}}">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md">
                                                <h4 id="sales_task_label_{{blockValue}}"></h4>
                                                <div class="row" id="sales_task_div_{{blockValue}}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-3 child-card" id="revenue_task_card_{{blockValue}}">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md">
                                                <h4 id="revenue_task_label_{{blockValue}}"></h4>
                                                <div class="row" id="revenue_task_div_{{blockValue}}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-3 child-card" id="review_task_card_{{blockValue}}">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md">
                                                <h4 id="review_task_label_{{blockValue}}"></h4>
                                                <div class="row" id="review_task_div_{{blockValue}}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}  
        <div class="card main-card" id="block_{{blockValue}}">
            <div class="card-body">
                <h3 class="mt-3" id="set_level_{{blockValue}}">Set Level {{blockValue}}</h3>
                <input type="hidden" name="rank[{{blockValue}}][level]" value="{{blockValue}}">    
                <a href="#" id="add_button_{{blockValue}}" class="btn btn-primary col-md add-button" style="float:right"><i class="ph ph-plus-circle"></i></a>
                <div class="level">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mt-3">Level Name</h6>
                            <input type="text" id="level_name_{{blockValue}}" name="rank[{{blockValue}}][level_name]" value="" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <div>
                                <h6 class="mt-3">Select Task</h6>
                                <select name="rank[{{blockValue}}][task][]" multiple="multiple" data-placeholder="Enter tags" class="form-control multiselect" id="category_{{blockValue}}">
                                    <optgroup label="Marketing Tasks" id="marketing_task">
                                        <option value="connect_instagram">Connect Instagram</option>
                                        <option value="join_trello">Join Trello Board</option>
                                        <option value="answer_question">Answer Question</option>
                                    </optgroup>
                                    <optgroup label="Sales Tasks" id="sale_task">
                                        <option value="direct_on_board">Direct On Board Member</option>
                                        <option value="level_on_board">On Board Level Member</option>
                                        <option value="get_sales">Get Sales</option>
                                    </optgroup>
                                    <optgroup label="Revenue Tasks" id="revenue_task">
                                        <option value="direct_revenue">Direct Revenue</option>
                                        <option value="team_revenue">Team Revenue</option>
                                    </optgroup>
                                    <optgroup label="Review Tasks" id="review_task">
                                        <option value="client_review">Client Review</option>
                                        <option value="partner_review">Partner Review</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    <div class="col-md-6">
                            <h6 class="mt-3">Bonus Payout</h6>
                            <div class="form-control-feedback form-control-feedback-end mb-3">
                                <input type="number" id="level_bonus_payout_{{blockValue}}" name="rank[{{blockValue}}][bonus_payout]" value="" class="form-control">
                                <div class="form-control-feedback-icon form-control-feedback-icon-lg">
                                    <i class="ph ph-percent ph-lg"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mt-3">Benefits</h6>
                            <div class="card benefits-card">
                                <div class="card-body">
                                    <div class="mb-3 mt-3">
                                        <div class="banefits-container" id="banefits_container_{{blockValue}}">
                                            <!-- Rule template goes here -->
                                            <div class="banefits" id="banefits_{{blockValue}}_{{banifitesValue}}">
                                                <div class="row mt-2">
                                                    <div class="col-md-9">
                                                        <input type="text" id="level_banefits_{{blockValue}}_{{banifitesValue}}" name="rank[{{blockValue}}][benefits][{{banifitesValue}}]" value="" class="form-control">
                                                    </div>
                                                    <div class="col-md-3 add-and-remove" id="add_and_remove_{{blockValue}}_{{banifitesValue}}">
                                                        <button type="button" class="btn btn-primary  add-banefites" id="add_banefites_{{blockValue}}_{{banifitesValue}}" title="Add Benefites"><i class="ph ph-plus-circle"></i></button>
                                                        <!-- Remove Benefites button -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card child-card mt-3" id="marketing_task_card_{{blockValue}}">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 id="marketing_task_label_{{blockValue}}"></h4>
                                            <div class="row" id="marketing_task_div_{{blockValue}}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-3 child-card" id="sales_task_card_{{blockValue}}">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 id="sales_task_label_{{blockValue}}"></h4>
                                            <div class="row" id="sales_task_div_{{blockValue}}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-3 child-card" id="revenue_task_card_{{blockValue}}">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 id="revenue_task_label_{{blockValue}}"></h4>
                                            <div class="row" id="revenue_task_div_{{blockValue}}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-3 child-card" id="review_task_card_{{blockValue}}">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md">
                                            <h4 id="review_task_label_{{blockValue}}"></h4>
                                            <div class="row" id="review_task_div_{{blockValue}}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
   
    <div id="blockContainer"></div>
    <div class="col-lg-1">
        <button type="submit" class="btn btn-primary">save</button>
    </div>
</form>
{% endblock %}
{% block javascripts %}
    <script>
        var blockValue = {{ blockValue }};
        var banifitesValue = {{ banifitesValue }};
        {% if rankSettingData is not empty %}
            {% set rankSettingDataArray = [] %}
            {% for item in rankSettingData %}
                {% set rankSettingDataArray = rankSettingDataArray|merge([{
                    'task_json_data': item.getTaskJsonData,
                    'benefites': item.getBenefits,
                }]) %}
            {% endfor %}
            {% set rankSettingDataJSON = rankSettingDataArray|json_encode %}
            var rankSettingData = {{ rankSettingDataJSON|raw }};
        {% endif %}
         $(document).ready(function() {
        $('#rank-setting-form').on('submit', function(e) {
            // Check if the form is valid
            if (validateAllBlocks()) {
                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                }).then(() => {
                    // Optionally handle form submission via AJAX here
                    this.submit(); // Submit the form after showing the processing alert
                });
            }
        });
    });
    </script>
    <script src="{{ asset('assets/js/admin/rank_setting.js') }}"></script>
{% endblock %}