{% extends 'admin-layout.html' %}


{% block styles %}
{{super()}}
{% if admin_view.extra_css %}
{% for css_url in admin_view.extra_css %}
<link href="{{ css_url }}" rel="stylesheet">
{% endfor %}
<link rel="stylesheet" href="{{static_url_for(filename='plugins/bootstrap4-editable/css/bootstrap-editable.css')}}">
<link rel="stylesheet" href="{{static_url_for(filename='plugins/select2/select2.css')}}">
{% endif %}

<style>
    #domain,
    #servernames {
        direction: ltr
    }

    .column-header {
        text-align: center;
    }

    .breadcrumb {
        display: none;
    }
</style>
{% endblock %}


{% block tail_js %}
{{super()}}

{% if admin_view.extra_js %}
{% for js_url in admin_view.extra_js %}
<script src1="{{ js_url }}" type="text/javascript"></script>
{% endfor %}
{% endif %}
<!-- Include the default stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/multiple-select@2.1.1/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/multiple-select@2.1.1/dist/multiple-select.min.js"></script>
<link href="https://unpkg.com/multiple-select@2.1.1/dist/themes/bootstrap.min.css" rel="stylesheet">
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.0.0/dist/css/select2.min.css" rel="stylesheet" /> -->
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>     -->

{%endblock%}
{%block last%}
<script src="{{ static_url_for( filename='plugins/bootstrap4-editable/js/bootstrap-editable.min.js' ) }}"></script>
<script>
    
    function update_hiddify_ui() {
        
        $("#show_domains").multipleSelect({ width: '100%',      filter: true });
        // $("#download_domain").select2()
        $("#download_domain").multipleSelect({ width: '100%',      filter: true });

        if ($("#domain").length > 0) {
            var selectElement = document.getElementById("mode");
            var groups = [
                { label: `{{_("Direct")}}`, options: ["direct","dnstt"] },
                { label: `{{_("Panel Link")}}`, options: ["sub_link_only"] },
                { label: `{{_("Bridge Servers")}}`, options: ["cdn",  "worker", "relay"] },
                { label: `{{_("Fake")}}`, options: ["special_reality_xhttp","special_reality_tcp","special_reality_grpc", "fake"] }
            ];

            var options = Array.from($("#mode option"));
            // Remove existing options
            while (selectElement.firstChild) {
                selectElement.removeChild(selectElement.firstChild);
            }
            for (var i = 0; i < groups.length; i++) {
                var group = groups[i];
                var optgroup = document.createElement("optgroup");
                optgroup.label = group.label;


                for (var j = 0; j < group.options.length; j++) {
                    for (var j = 0; j < options.length; j++) {
                        var option = options[j];
                        if (group.options.includes(option.value)) {
                            optgroup.appendChild(option.cloneNode(true));
                        }
                    }
                }

                selectElement.appendChild(optgroup);
            }
        }
        $('.form-group:not(:has(.custom-switch)) > input[type="checkbox"]').each(function () {
            var parent = $(this).closest('.form-group');
            var label = parent.find('label').hide().text();
            $(this).wrap('<div class="custom-control custom-switch"></div>');
            $(this).addClass('custom-control-input');
            $(this).parent('.custom-control').append('<label class="custom-control-label" for="' + $(this).attr('id') + '">' + label + '</label>');
        });
        function hide_domain_elements() {
            console.log("test")
            if (["dnstt",'fake','reality','special_reality_grpc','special_reality_xhttp'].includes($("#mode").val())){
                $("#show_domains").parent().hide()
            }else{
                $("#show_domains").parent().show()
            }
            if ($("#mode").val() == "sub_link_only") {
                $("#cdn_ip").parent().hide();
                $("#cdn_ip").val("")
                //$("#mode").parent().hide();
                
                $("#resolve_ip").parent().hide()
                $("#servernames").parent().hide();
                $("#domain").parent().find(".control-label").html(`{{_('domain.domain')}}`)
                $("#domain").parent().find(".help-block").html(`{{_('domain.description')}}`)
                $("#download_domain").parent().hide();

            }else if ($("#mode").val() == "dnstt") {
                $("#resolve_ip").parent().hide()
                $("#servernames").parent().hide();
                $("#download_domain").parent().hide();
            } else {
                $("#download_domain").parent().show();
                $("#cdn_ip").parent().show();
                //$("#mode").parent().show();
                
                $("#resolve_ip").parent().show()

                if ($("#mode").val() == 'direct') {
                    $("#cdn_ip").parent().hide();
                } else {
                    $("#cdn_ip").parent().show();
                }
                {% autoescape false %}
                if (($("#mode").val()?? "").indexOf('reality')>=0) {

                    //$("#servernames").parent().hide();
                    $("#servernames").parent().show();
                    $("#servernames").parent().find(".control-label").html(`{{_('config.reality_server_names.label')}}`)
                    $("#servernames").parent().find(".help-block").html(`{{_('config.reality_server_names.description')}}`)

                    // $("#grpc").parent().parent().show()
                    $("#domain").parent().find(".control-label").html(`{{_('config.reality_fallback_domain.label')}}`)
                    $("#domain").parent().find(".help-block").html(`{{_('config.reality_fallback_domain.description')+("<a target='_blank' href='" +hurl_for('admin.Actions:get_some_random_reality_friendly_domain',test_domain=domain)+"'>"+_('Example Domains')+"</a>")}}`)
                    $("#download_domain").parent().hide();
                } else {
                    
                    if ($("#mode").val() == 'cdn' || $("#mode").val() == 'auto_cdn_ip') {
                        $("#servernames").parent().show();
                        $("#servernames").parent().find(".control-label").html(`{{_('domain.domain_fronting.label')}}`)
                        $("#servernames").parent().find(".help-block").html(`{{_('domain.domain_fronting.description')}}`)
                    } else {
                        $("#servernames").parent().hide();
                    }

                    
                    $("#domain").parent().find(".control-label").html(`{{_('domain.domain')}}`)
                    $("#domain").parent().find(".help-block").html(`{{_('domain.description')}}`)
                }

                {% endautoescape %}

            }
        }
        $("#sub_link_only").on('change', hide_domain_elements)
        $("#mode").on('change', hide_domain_elements)
        hide_domain_elements()
        ConvertNumberToPersion(document.getElementById('fa_modal_window'));
        
    }
    
    update_hiddify_ui()

    
      $('body').off('click.modal.data-api')//remove flaskadminlte
      $('body').on('click.modal.data-api', '[data-toggle="modal"]', function () {
        
        $($(this).data("target") + ' .modal-content').load($(this).attr('href'),function(){
            setTimeout(update_hiddify_ui,100)
        });
      });
    
    // Initialize the observer with the callback function
    

    // Observe changes in the container element and its descendants
    
</script>

{% endblock %}










{% block body %}
{# store the jinja2 context for form_rules rendering logic #}
{% set render_ctx = h.resolve_ctx() %}
{% endblock %}


{% block rtl_styles %}
{{super()}}
<style>
    #cdn_ip {
        direction: ltr;
    }

    #expiry_time,
    #last_reset_time,
    #current_usage_GB,
    #usage_limit_GB,
    #package_days,
    #start_date {
        direction: ltr;
        text-align: right;
    }
</style>

{% endblock %}