{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_commission_setting' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title':'Commission Management',
    },
    {
        'link': path('app_admin_commission_setting'), 'title': 'Commmission',
    },
    {
        'title': 'Edit'
    }
]%}
{% block title %}{{ title }}{% endblock %}

{% block content %}
    {% if commissionSetting %}
    <form id="commission-form" method="post" >
        <div class="card">
            <div class="card-body">
                <div class="row mt-2">
                    <div class="col-lg-8">
                        <input id="commission-name" type="text" name="commission-name" placeholder="Enter a name for this commistion plan" class="form-control" value="{{ commissionSetting.name }}">
                        <span id="commission-name-error" class="error-message" style="display: none; color: red">Please enter a commission name.</span>
                    </div>
                    <div class="col-lg-2">
                        <select id="commission-status" name="commission-status" class="form-select">
                            <option value="Draft" name="Draft" {% if commissionSetting.status == 'Draft' %} selected {% endif %}>Darft</option>
                            <option value="Public" name="Public" {% if commissionSetting.status == 'Public' %} selected {% endif %}>Public</option>
                        </select>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-6">
                        <h2>Commission</h2><hr>
                        <div class="mb-3">
                            <input type="number" id="commission-percentage" value="{{ commissionSetting.commissionLevelOne }}" name="commission-percentage" placeholder="Enter commission in percentage(%)" class="form-control" onkeyup="setFirstTierValue(); calculateTotalCommission();">
                            <span id="commission-percentage-error" class="error-message" style="display: none; color: red;">Please enter a percentage of commission.</span>
                        </div>

                        <div class="mb-3">
                            <h6>Multi-level commission? How many tiers?</h6>
                            <input type="number" value="{{ commissionSetting.multiLevel }}" id="num-tiers" name="commission-level" class="form-control" style="display: inline-block; width: auto;" onkeyup="addTiers()" min="1" max="6">
                            <span id="num-tiers-error" class="error-message" style="display: none; color: red;">Please enter a number between 1 and 4.</span>
                        </div>

                        <div class="mb-3">
                            <h6>Tier-wise commission distribution</h6>
                            <div class="row" id="tier-container">
                                <!-- First tier is added by default -->
                                <div class="col-md-6 mt-2">
                                    <label>T1:</label>
                                    <input type="number" value="{{ commissionSetting.commissionLevelOne }}" id="tier-1" name="tier-1-percentage"  class="form-control" style="width: auto; display: inline-block;" disabled>%
                                </div>
                            </div>
                        </div>

                        <h5>Total commission: <span id="total-commission">0.00%</span></h5>
                    </div>

                    <div class="col-lg-6">
                        <h2>Rules</h2><hr>
{#                        <div class="mb-3">#}
{#                            <span style="display: inline-block; margin-right: 10px;">When</span>#}
{#                            <select id="rule_condition" name="rule_condition" class="form-select" style="display: inline-block; width: auto;">#}
{#                                <option value="at least one" name="at-least-one" {% if commissionSetting.rules[0] == 'at least one' %} selected {% endif %}>At least one</option>#}
{#                                <option value="all" name="all" {% if commissionSetting.rules[0] == 'all' %} selected {% endif %}>All</option>#}
{#                            </select>#}
{#                            <span style="display: inline-block; margin-left: 10px;">rule groups pass</span>#}
{#                        </div>#}


                        <div id="groups-container">
                            {% for key, group in commissionSetting.rules %}
                                {% if key starts with 'rule_group_' %}
                                    <div class="group" id="{{ key }}">
                                        <div class="card">
                                            <div class="card-body">
                                                <!-- Your existing group HTML goes here -->
                                                <div class="mb-3 mt-3">
{#                                                    <div class="raw">#}
{#                                                        <span style="display: inline-block; margin-right: 10px;">This group is a "pass" when</span>#}
{#                                                        <select name="group[{{ key }}][group_condition]" class="form-select" style="display: inline-block; width: auto;">#}
{#                                                            <option value="all" {% if group['group_condition'] == 'all' %} selected {% endif %}>All</option>#}
{#                                                            <option value="only one" {% if group['group_condition'] == 'only one' %} selected {% endif %}>Only one</option>#}
{#                                                        </select>#}
{#                                                        <span style="display: inline-block; margin-left: 10px;">of the following rules are true.</span>#}
{#                                                    </div>#}
                                                    <div class="rules-container">
                                                        {% if commissionSettingsProducts %}
                                                            <div class="alert alert-info" role="alert">
                                                                <h4 class="alert-heading">Note</h4>
                                                                <p>Some products in the dropdown are disabled due to being used in other commissions. Kindly select an alternative product.</p>
                                                            </div>
                                                        {% endif %}
                                                        <h6>Products </h6>
                                                        {% for roleKey, ruleRow in group %}
                                                            {% if roleKey starts with 'rule_' %}
                                                            <!-- Rule template goes here -->
                                                            <div class="row mt-2 rule" id="{{ roleKey }}">
                                                                <div class="col-md-5">
                                                                    <select name="group[{{ key }}][{{ roleKey }}][product_id]" class="form-control">
                                                                        {% for product in products %}
                                                                            {% set disabled = product.id != ruleRow.product_id and product.id in commissionSettingsProducts ? 'disabled' : '' %}
                                                                            <option value="{{ product.id }}" {% if product.id == ruleRow.product_id %} selected {% endif %} {{ disabled }}>{{ product.name }}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-1 btn btn-danger">
                                                                    <i class="ph ph-trash remove-product"></i>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </div>
                                                    <div class="row mt-2">
                                                        <div class="col-md-3 btn btn-primary">
                                                            <span class="add-rule"><i class="ph ph-plus-circle"></i> Add a product </span>
                                                        </div>
                                                        <div class="col-md-3"></div>
{#                                                        <div class="col-md-3">#}
{#                                                            <span class="add-group"><i class="ph ph-folder-simple-plus"></i> Add another group </span>#}
{#                                                        </div>#}
{#                                                        <div class="col-md-3">#}
{#                                                            <span class="remove-group"><i class="ph ph-folder-simple-minus"></i> Remove this group </span>#}
{#                                                        </div>#}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-1">
            <button type="submit" class="btn btn-primary">save</button>
        </div>
    </form>
    {% endif %}
{% endblock %}
{% block javascripts %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            addTiers();
            // calculateTotalCommission();
        });
        function addTiers() {
            var numTiers = document.getElementById("num-tiers").value;
            var tierContainer = document.getElementById("tier-container");
            var numTiersError = document.getElementById("num-tiers-error");

            // Hide the error message initially
            numTiersError.style.display = "none";

            // Check if the number of tiers is more than 4
            if (numTiers > 6) {
                numTiersError.style.display = "block";
                return; // Exit the function if more than 4 tiers are entered
            }

            // Store the value of tier-1 input before clearing the container
            var tier1Value = document.getElementById("tier-1").value;
            var tier1Disabled = document.getElementById("tier-1").disabled;

            // Clear previous tiers
            tierContainer.innerHTML = "";

            // Add back the first tier with its value
            var firstTierDiv = document.createElement("div");
            firstTierDiv.className = "col-md-6 mt-2";
            var firstTierLabel = document.createElement("label");
            firstTierLabel.textContent = "T1:";
            var firstTierInput = document.createElement("input");
            firstTierInput.type = "number";
            firstTierInput.id = "tier-1";
            firstTierInput.name = "tier-1-percentage";
            firstTierInput.className = "form-control";
            firstTierInput.style.width = "auto";
            firstTierInput.style.display = "inline-block";
            firstTierInput.value = tier1Value; // Set the value of tier-1 input
            firstTierInput.disabled = tier1Disabled; // Set the disabled status
            var firstTierPercentSign = document.createTextNode("%");
            firstTierDiv.appendChild(firstTierLabel);
            firstTierDiv.appendChild(firstTierInput);
            firstTierDiv.appendChild(firstTierPercentSign);
            tierContainer.appendChild(firstTierDiv);

            // Add additional tiers based on the number entered by the user
            for (var i = 2; i <= numTiers; i++) {
            var tierDiv = document.createElement("div");
            tierDiv.className = "col-md-6 mt-2";
            var tierLabel = document.createElement("label");
            tierLabel.textContent = "T" + i + ":";
            var tierInput = document.createElement("input");
            tierInput.type = "number";
            tierInput.id = "tier-" + i;
            tierInput.name = "tier-" + i + "-percentage";
            tierInput.className = "form-control";
            tierInput.style.width = "auto";
            tierInput.style.display = "inline-block";
            var tierPercentSign = document.createTextNode("%");
            tierDiv.appendChild(tierLabel);
            tierDiv.appendChild(tierInput);
            tierDiv.appendChild(tierPercentSign);
            tierContainer.appendChild(tierDiv);
            // Set value for each tier input based on tier number
            if (i === 2) {
                tierInput.value = "{{ commissionSetting.commissionLevelTwo }}";
            } else if (i === 3) {
                tierInput.value = "{{ commissionSetting.commissionLevelThree }}";
            } else if (i === 4) {
                tierInput.value = "{{ commissionSetting.commissionLevelFour }}";
            } else if (i === 5) {
                tierInput.value = "{{ commissionSetting.commissionLevelFive }}";
            } else if (i === 6) {
                tierInput.value = "{{ commissionSetting.commissionLevelSix }}";
            }
            tierInput.addEventListener("input", calculateTotalCommission);
        }
    }

        // function calculateTotalCommission() {
        //     var totalCommission = parseFloat(document.getElementById("commission-percentage").value) || 0;
        //     var numTiers = document.getElementById("num-tiers").value;
        //
        //     for (var i = 2; i <= numTiers; i++) {
        //         var tierValue = parseFloat(document.getElementById("tier-" + i).value) || 0;
        //         totalCommission += tierValue;
        //     }
        //
        //     document.getElementById("total-commission").textContent = totalCommission.toFixed(2) + "%";
        // }

    function setFirstTierValue() {
        var commissionValue = document.getElementById("commission-percentage").value;
        var firstTierInput = document.getElementById("tier-1");
        firstTierInput.value = commissionValue;
    }
    $(document).ready(function() {
        $('#commission-form').on('submit', function(e) {
            // Check if the form is valid
            if ($(this).valid()) {
                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>
{% endblock %}