{% load static %}
{% load i18n %}
<style>
    .page_title {
        color: #134473 !important;
    }

    #tab_masking .tab-content .tab-pane {
        max-width: 800px;
    }

    .button_block {
        position: relative;
    }

    .button_block .form-control {
        display: inline;
        width: auto;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 7px;
        height: 33px;
        max-width: 200px;
        width: 100%;
        overflow: hidden;
        background-color: transparent;
    }

    .add_masking, .cards, .btn.btn-save {
        margin-left: 55px;
    }

    .filter {
        position: absolute;
        top: 0;
        right: 0;
    }

    .filter .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #c5c5c5;
        pointer-events: none;
        font-size: 14px;
    }

    .filter input {
        padding-left: 30px;
    }

    .button_block .btn, .cards .btn, .btn.btn-save {
        padding: 5px 15px;
        border-radius: 7px;
    }

    .cards {
        margin-top: 25px;
    }

    .card {
        background: white;
        border-radius: 13px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        padding: 20px 24px;
        width: 100%;
        border-left: 3px solid #d5e4f3;
        margin-bottom: 15px;
    }

    .card.hide-card {
        height: 74px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        cursor: pointer;
    }

    .header > div:first-child {
        flex: 1;
        cursor: pointer;
    }

    .zones {
        max-height: 3000px;
        overflow: hidden;
        transition: max-height 0.3s ease, margin-top 0.3s ease;
    }

    .zones.show {
        max-height: 0;
        margin-top: 0;
    }

    .zone {
        border-left: 2px solid #ececf0;
        padding-left: 15px;
        margin-top: 23px;
    }

    .select_block {
        position: relative;
        display: inline-block;
    }

    .select_block > .remove {
        position: absolute;
        top: 5px;
        right: -29px;
        cursor: pointer;
        font-size: 23px;
    }

    .zone select {
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 12px;
        background: white;
        min-width: 125px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.583374 0.583328L4.08337 4.08333L7.58337 0.583328' stroke='%23717182' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
    }

    .arrow i.fa {
        color: #0a0a0a !important;
    }

    .condition {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-top: 8px;
    }

    .condition input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 7px;
    }

    .condition input::placeholder,
    .button_block .form-control::placeholder {
        color: #c5c5c5;
    }

    .condition span {
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23717182' fill-rule='evenodd' clip-rule='evenodd'><path d='M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z'/></svg>");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .add-btn {
        margin-top: 10px;
        background: none;
        border: 1px solid #ccc;
        padding: 5px 9px;
        border-radius: 7px;
        color: #134473;
        font-size: 13px;
        cursor: pointer;
    }

    .add-btn > b {
        font-size: 14px;
        color: #0a0a0a;
    }

    .delete-btn {
        background: transparent;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 23px;
    }

    .delete-btn:hover {
        background: transparent;
    }

    .zones-footer {
        margin-top: 10px;
    }

    .zones-footer .add-btn {
        font-weight: 500;
    }

    .masking_block {
        border-left: 2px solid #ececf0;
        overflow: hidden;
        box-sizing: border-box;
        border-left: 2px solid #ececf0;
        padding-left: 15px;
        max-height: 2000px;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .zone {
        max-height: 2000px;
    }

    .arrow {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        display: inline-block;
        cursor: pointer;
        margin-right: 8px;
        transition: transform 0.2s ease;
    }

    .arrow {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        display: inline-block;
        cursor: pointer;
        margin-right: 8px;
    }

    .arrow i.fa {
        color: #0a0a0a !important;
        display: inline-block;
        transition: transform 0.2s ease;
        transform: rotate(0deg);
    }

    .arrow.rotated i.fa {
        transform: rotate(-90deg);
    }

    .show {
        max-height: 0 !important;
    }

    .show.zone {
        max-height: 0 !important;
        padding: 0;
        border: none;
    }

    .show-transition {
        transition: all 0.3s ease;
    }

    .source_data {
        display: none;
    }

    #messages-block-masking {
        display: none;
        position: fixed;
        bottom: 0%;
        right: 2%;
        z-index: 500;
    }

    .alert_waf {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 4px;
        font-size: 16px;
    }

    .alert_waf_success,
    .alert_waf_error,
    .alert_waf_info {
        color: #1a5287;
        background-color: #ffffff;
        border: 2px solid #1a5287;
    }
</style>
<script>
    function showMaskingMessage(message, type) {
        const messageBlock = $('#messages-block-masking');
        const alertClass = type === 'success' ? 'alert_waf_success' : (type === 'error' ? 'alert_waf_error' : 'alert_waf_info');

        const alertHtml = `
            <div class="alert_waf ${alertClass}" role="alert">
                ${message}
            </div>
        `;

        messageBlock.html(alertHtml);
        messageBlock.show().delay(5000).hide("slow");
    }

    function toggleSearchVisibility(tabPane) {
        if (!tabPane) {
            tabPane = $('.tab-pane.active');
        }

        const hasCards = tabPane.find('.cards .card').length > 0;
        const filterBlock = tabPane.find('.filter');

        if (hasCards) {
            filterBlock.show();
        } else {
            filterBlock.hide();
        }
    }

    $(document).ready(function () {
        $('.card').addClass('hide-card');
        $('.card .zones').addClass('show');
        $('.card .header .arrow').removeClass('rotated');
        $('.zone .select_block .arrow').addClass('rotated');

        $('.tab-pane').each(function() {
            toggleSearchVisibility($(this));
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            const targetTab = $($(e.target).attr('href'));
            toggleSearchVisibility(targetTab);
        });

        function updateZoneOptions(card) {
            const selectedZones = [];
            card.find('.zone select').each(function() {
                selectedZones.push($(this).val());
            });

            card.find('.zone select').each(function() {
                const currentValue = $(this).val();
                const select = $(this);

                const allOptions = [
                    { value: 'url', text: 'URL' },
                    { value: 'args', text: 'ARGS' },
                    { value: 'ua', text: 'UA (User-Agent)' },
                    { value: 'cookie', text: 'Cookie' },
                    { value: 'referer', text: 'Referer' },
                    { value: 'other_headers', text: 'Other headers' },
                    { value: 'body', text: 'BODY' }
                ];

                select.empty();

                allOptions.forEach(function(option) {
                    if (option.value === currentValue || !selectedZones.includes(option.value)) {
                        select.append($('<option>', {
                            value: option.value,
                            text: option.text,
                            selected: option.value === currentValue
                        }));
                    }
                });
            });
        }
        function updateAddZoneButtonVisibility(card) {
            const selectedZones = [];
            card.find('.zone select').each(function() {
                selectedZones.push($(this).val());
            });

            const allZones = ['url', 'args', 'ua', 'cookie', 'referer', 'other_headers', 'body'];
            const hasAvailableZones = allZones.some(zone => !selectedZones.includes(zone));

            const addZoneBtn = card.find('.add-zone-btn');
            if (hasAvailableZones) {
                addZoneBtn.show();
            } else {
                addZoneBtn.hide();
            }
        }

        $(document).on('click', '.add_masking .btn-primary', function () {
            const input = $(this).siblings('input');
            const url = input.val().trim();
            if (!url) return alert('Введите URL');
            input.val('');

            const currentTabPane = $(this).closest('.tab-pane');
            const newCard = $(`
            <div class="card hide-card">
                <div class="header" data-url="${url}">
                    <div><span class="arrow"><i class="fa fa-angle-right"></i></span> ${url}</div>
                    <button class="btn btn-primary remove-card">{% trans 'Remove' %}</button>
                </div>
                <div class="zones show show-transition">
                    <div class="zones-footer">
                        <button class="add-btn add-zone add-zone-btn"><b style="padding-right: 6px">+</b> {% trans 'Add zone' %}</button>
                    </div>
                </div>
            </div>
            `);

            currentTabPane.find('.cards').append(newCard);
            toggleSearchVisibility(currentTabPane);
        });

        $(document).on('click', '.remove-card', function (e) {
            e.stopPropagation();
            const currentTabPane = $(this).closest('.tab-pane');
            $(this).closest('.card').remove();
            toggleSearchVisibility(currentTabPane);
        });

        $(document).on('click', '.add-btn', function () {
            const btn = $(this);

            if (btn.hasClass('add-zone-btn')) {
                const card = btn.closest('.card');

                const selectedZones = [];
                card.find('.zone select').each(function() {
                    selectedZones.push($(this).val());
                });

                const allZones = [
                    { value: 'url', text: 'URL' },
                    { value: 'args', text: 'ARGS' },
                    { value: 'ua', text: 'UA (User-Agent)' },
                    { value: 'cookie', text: 'Cookie' },
                    { value: 'referer', text: 'Referer' },
                    { value: 'other_headers', text: 'Other headers' },
                    { value: 'body', text: 'BODY' }
                ];

                let firstAvailable = allZones.find(zone => !selectedZones.includes(zone.value));

                if (!firstAvailable) {
                    return;
                }

                let selectOptions = '';
                allZones.forEach(zone => {
                    const selected = zone.value === firstAvailable.value ? 'selected' : '';
                    selectOptions += `<option value="${zone.value}" ${selected}>${zone.text}</option>`;
                });

                const zone = $(`
                <div class="zone show-transition">
                    <div class="select_block collapsible" data-part="${firstAvailable.value}">
                        <span class="arrow rotated"><i class="fa fa-angle-right"></i></span>
                        <select>
                            ${selectOptions}
                        </select>
                        <div class="remove remove-zone"><i class="fa fa fa-trash-o"></i></div>
                    </div>
                    <div class="masking_block show-transition">
                        <button class="add-btn add-condition-btn"><b style="padding-right: 6px">+</b> {% trans 'Add a condition' %}</button>
                    </div>
                </div>
                `);

                btn.closest('.zones').find('.zones-footer').before(zone);
                updateZoneOptions(card);
                updateAddZoneButtonVisibility(card);

            } else if (btn.hasClass('add-condition-btn')) {
                const condition = $(`
                <div class="condition">
                    <input type="text" class="pattern-input" placeholder="{% trans 'pattern' %}">
                    <span></span>
                    <input type="text" class="replacement-input" placeholder="{% trans 'replacement' %}">
                    <button class="delete-btn"><i class="fa fa fa-trash-o"></i></button>
                </div>
                `);
                btn.before(condition);
            }
        });

        $(document).on('click', '.remove-zone, .remove', function (e) {
            e.stopPropagation();
            const card = $(this).closest('.card');
            const block = $(this).closest('.zone');
            block.remove();
            updateZoneOptions(card);
            updateAddZoneButtonVisibility(card);
        });

        $(document).on('click', '.delete-btn', function () {
            $(this).closest('.condition').remove();
        });

        $(document).on('click', '.header', function (e) {
            if ($(e.target).closest('.remove-card').length > 0) {
                return;
            }

            const header = $(this);
            const card = header.closest('.card');
            const arrow = header.find('.arrow');
            const zones = header.next('.zones');

            card.toggleClass('hide-card');
            zones.toggleClass('show');
            arrow.toggleClass('rotated');
        });

        $(document).on('click', '.select_block.collapsible', function (e) {
            if ($(e.target).is('select') || $(e.target).closest('.remove').length > 0) {
                return;
            }

            const selectBlock = $(this);
            const arrow = selectBlock.find('.arrow');
            const maskingBlock = selectBlock.next('.masking_block');

            maskingBlock.toggleClass('show');
            arrow.toggleClass('rotated');
        });

        $(document).on('change', '.zone select', function() {
            const card = $(this).closest('.card');
            updateZoneOptions(card);
        });

        $(document).on('input', '.filter input', function() {
            const query = $(this).val().trim().toLowerCase();
            const currentTabPane = $(this).closest('.tab-pane');

            currentTabPane.find('.cards .card').each(function() {
                const url = ($(this).find('.header').data('url') || '').toLowerCase();

                if (query === '' || url.includes(query)) {
                    $(this).css('display', '');
                } else {
                    $(this).css('display', 'none');
                }
            });
        });

        // Save data
        $(document).on('click', '.btn-save', function() {
            const cardContainer = $(this).closest('.tab-pane');
            const keyId = cardContainer.attr('id');
            const masking = {};

            cardContainer.find('.cards .card').each(function() {
                const url = $(this).find('.header').data('url');
                const zones = {};
                $(this).find('.zone').each(function() {
                    const zoneName = $(this).find('select').val();
                    const rules = {};

                    $(this).find('.condition').each(function() {
                        const pattern = $(this).find('.pattern-input').val();
                        const replacement = $(this).find('.replacement-input').val();

                        if (pattern && replacement) {
                            rules[pattern] = replacement;
                        }
                    });

                    if (Object.keys(rules).length > 0) {
                        zones[zoneName] = rules;
                    }
                });

                if (Object.keys(zones).length > 0) {
                    masking[url] = zones;
                }
            });

            const payload = {
                key_id: keyId,
                set: {
                    active: true,
                    masking: masking
                }
            };

            let home = document.getElementById('home').textContent;

            $.ajax({
                url: home + '/save_masking/',
                headers: {'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value},
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(payload),

                success: function(response, textStatus, xhr) {
                    if (xhr.status === 255) {
                        show_messages_from_response(response);
                        return;
                    }

                    if (response.status === "success") {
                        showMaskingMessage("{% trans 'Masking saved successfully' %}", "success");
                    } else {
                        var errorMsg = "{% trans 'Saving error:' %} " + (response.description || "{% trans 'unknown error' %}");
                        showMaskingMessage(errorMsg, "error");
                    }
                },

                error: function(response) {
                    showMaskingMessage("{% trans 'Error saving settings' %}", "error");
                }
            });
        });

        $('.card').each(function() {
            updateZoneOptions($(this));
            updateAddZoneButtonVisibility($(this));
        });
    });
</script>

<div class="source_data">{{ source_data|safe }}</div>
<div class="container-fluid" style="font-weight: 400;">
    <ul class="nav nav-tabs horizontal-tabs"
        style="margin-left: 55px; margin-top: 10px; border-bottom: 0; border-radius: 6px;">
        {% for key in lic_keys %}
        <li class="bl_rule nav-item horizontal-item rule_key_tab {% if forloop.first %} active {% endif %}">
            <a style="padding-top: 0; border-bottom-width: 0; border-right-width: 0; border-left-width: 0;border-top-width: 0;margin-top: -1px;"
               class="nav-link horizontal-item-link rule_key_tab {% if forloop.first %} active {% endif %} vertical_tab"
               data-toggle="tab"
               href="#{{ key.id }}">{{ key.description }}</a>
        </li>
        {% endfor %}
    </ul>
    <div class="tab-content">
        {% for key in lic_keys %}
        <div class="tab-pane fade rule_key_tab {% if forloop.first %} active in {% endif %}"
             id="{{ key.id }}">

            <div class="tab-content">
                <div role="tabpanel"
                     class="tab-pane fade {% if request.COOKIES.settigns_rule_page == 'WL' or not request.COOKIES.settigns_rule_page %}in active{% endif %}"
                     id="disable_core_rules_{{ key.id }}">
                    <h2 class="page_title" style="margin-left: 55px;color: black;display: block">{% trans 'Setting up data masking' %}</h2>
                    <div class="button_block">
                        <div class="add_masking">
                            <input type="text" name="" id="" class="form-control is-invalid" placeholder="{% trans 'Enter the URL' %}">
                            <button class="btn btn-primary">{% trans 'Add' %}</button>
                        </div>
                        <div class="filter">
                            <input type="text" name="" id="" class="form-control is-invalid" placeholder="{% trans 'Find URL' %}">
                            <span class="search-icon">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>
                    </div>
                    <div class="cards">
                        {% for url, parts in key.data.masking.items %}
                        <div class="card hide-card" data-id="{{ key.id }}">
                            <div class="header" data-url="{{ url }}">
                                <div><span class="arrow"><i class="fa fa-angle-right"></i></span> {{ url }}</div>
                                <button class="btn btn-primary remove-card">{% trans 'Remove' %}</button>
                            </div>

                            <div class="zones show show-transition">
                                {% for part_name, rules in parts.items %}
                                <div class="zone show-transition">
                                    <div class="select_block collapsible" data-part="{{ part_name }}">
                                        <span class="arrow rotated"><i class="fa fa-angle-right"></i></span>
                                        <select>
                                            <option value="url" {% if part_name == "url" %}selected{% endif %}>URL</option>
                                            <option value="args" {% if part_name == "args" %}selected{% endif %}>ARGS</option>
                                            <option value="ua" {% if part_name == "ua" %}selected{% endif %}>UA (User-Agent)</option>
                                            <option value="cookie" {% if part_name == "cookie" %}selected{% endif %}>Cookie</option>
                                            <option value="referer" {% if part_name == "referer" %}selected{% endif %}>Referer</option>
                                            <option value="other_headers" {% if part_name == "other_headers" %}selected{% endif %}>Other headers</option>
                                            <option value="body" {% if part_name == "body" %}selected{% endif %}>BODY</option>
                                        </select>
                                        <div class="remove"><i class="fa fa fa-trash-o"></i></div>
                                    </div>

                                    <div class="masking_block show-transition">
                                        {% for pattern, replacement in rules.items %}
                                        <div class="condition">
                                            <input type="text" class="pattern-input" value="{{ pattern }}">
                                            <span></span>
                                            <input type="text" class="replacement-input" value="{{ replacement }}">
                                            <button class="delete-btn"><i class="fa fa fa-trash-o"></i></button>
                                        </div>
                                        {% empty %}
                                        <div class="no-rules">{% trans 'No rules' %}</div>
                                        {% endfor %}

                                        <button class="add-btn add-condition-btn"><b style="padding-right: 6px">+</b> {% trans 'Add a condition' %}</button>
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="zones-footer">
                                    <button class="add-btn add-zone-btn"><b style="padding-right: 6px">+</b> {% trans 'Add zone' %}</button>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <button class="btn btn-primary btn-save">{% trans 'Save' %}</button>
                    <br>
                    <br>
                </div>
                <div role="tabpanel"
                     class="tab-pane fade {% if request.COOKIES.settigns_rule_page == 'ERL' %}in active{% endif %}"
                     id="blocking_rules_{{ key.id }}">
                    <button class="btn btn-primary"
                            style="margin-top: -43px; float: right;margin-bottom: 20px;margin-right: 15px; border-radius: 6px;"
                            onclick="location.href = '{{ home }}/erl_rule/?key_select={{ key.id }}';"><img
                            src="{% static 'my_waf/img/plus-circle.png' %}"
                            width="20"
                            height="20" alt=""
                            style="margin-right: 4px;vertical-align: sub;">{% trans 'Add ERL button' %}
                    </button>
                    {% include 'my_waf/erl.html' %}
                </div>
                <div role="tabpanel"
                     class="tab-pane fade {% if request.COOKIES.settigns_rule_page == 'BL' %}in active{% endif %}"
                     id="asa_bl_{{ key.id }}">
                    {% include 'my_waf/asa_bl.html' %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
<div id="messages-block-masking"></div>