jQuery(function ($) {


    // Capture click on color swatch
    document.addEventListener('click', function (e) {
        if (e.target.closest('#colorpicker')) {
            let picker = e.target.closest('#colorpicker');

            // parent ke barabar wala input find karo
            let input = picker.parentElement.previousElementSibling;

            if (input) {
                // value update karna agar attribute me color hai
                let color = e.target.getAttribute('rgb');
                if (color) input.value = color;

                // ab sirf ek hi dafa change trigger karo
                input.dispatchEvent(new Event('change', { bubbles: true }));
                console.log('Change triggered on:', input, 'with color:', color);
            }
        }
    }, true); // capture mode

    // ----------------------------
    // Bind listeners only once
    // ----------------------------
    colorChangeMain();

    function colorChangeMain() {
        textColorChange('#label_text_color', '.login-box-simple label');
        textColorChange('#forgot_text_color', '.forget-password a');
        textColorChange('#button_text_color', '#wp-submit');
        textColorChange('#input_text_color', '.main-preview .single-field-input .input', true);
        textColorChange('input[name=logindes_logo_text_color]', '.logo-text');

        function textColorChange(selector, selector2, svg = false) {
            $(document).on('change input', selector, function (e) {
                let val = $(this).val();
                if (svg) {
                    $('#togglePassword svg path').each(function () {
                        this.style.setProperty("stroke", val, "important");
                    });
                }
                $(selector2).each(function () {
                    this.style.setProperty("color", val, "important");
                });
            });
        }

        backgroundColorChange('#button_bg_color', '#wp-submit');
        backgroundColorChange('#input_bg_color', '.main-preview .single-field-input .input');

        function backgroundColorChange(selector, selector2) {
            $(document).on('change input', selector, function () {
                let val = $(this).val();
                $(selector2).each(function () {
                    this.style.setProperty("background-color", val, "important");
                });
            });
        }
    }

    $(document).on('submit', '.saveLoginCustomizerForm', function (e) {
        e.preventDefault();

        let formData = new FormData(this);
        let $btn = $(this).find('.saveBtn');
        console.log($btn);
        $.ajax({
            url: ajaxurl, // WordPress global JS var (admin-ajax.php)
            type: "POST",
            data: formData,
            processData: false, // important
            contentType: false, // important
            beforeSend: function () {
                $btn.html('Saving...');
            },
            success: function (response) {
                if (response.success) {
                    $btn.html('Saved');
                    setTimeout(function () {
                        $btn.html('Save');
                    }, 500);

                    toast({
                        title: response.data.message,
                        message: "",
                        type: "success",
                        duration: 5000
                    });

                } else {
                    $btn.html('Failed to save');
                    setTimeout(function () {
                        $btn.html('Save');
                    }, 500);

                    toast({
                        title: response.data.message,
                        message: "",
                        type: "error",
                        duration: 5000
                    });
                }
            },
            error: function (xhr, status, error) {
                $btn.html('Failed to save');
                setTimeout(function () {
                    $btn.html('Save');
                }, 500);
                console.log(error);
            }
        });
    });

    fontSizeChange('#label_font_size', '.login-box-simple label', 'select[name=logindes_label_font_size_attr]');
    fontSizeChange('#forgot_font_size', '.forget-password a', 'select[name=logindes_forgot_font_size_attr]');
    fontSizeChange('#button_font_size', '#wp-submit', 'select[name=logindes_button_font_size_attr]');
    fontSizeChange('input[name=logindes_logo_font_size]', '.logo-text');
    fontSizeChange('#input_font_size', '.main-preview .single-field-input .input', 'select[name=logindes_input_font_size_attr]');

    function fontSizeChange(selector, selector2, attributeEl = false) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let attr = 'px';

            if (attributeEl) {
                attr = $(attributeEl).val();
            }

            let val = $(this).val();
            $(selector2).each(function () {
                this.style.setProperty("font-size", val + attr, "important");
            });
        });
    }

    $('input[name=logindes_form_bg_transparent]').on('change', function () {
        if ($(this).is(':checked')) {
            // ✅ Check hone par background transparent force karo
            $('.form-opacity-div').each(function () {
                this.style.setProperty('opacity', 0, "important");
            });
            $('.login-box-simple').each(function () {
                this.style.setProperty("background", "transparent", "important");
            });


        } else {
            $( 'input[name=logindes_form_bg_opacity]' ).trigger( 'change' );
            // ❌ Uncheck hone par property hata do
            $('.login-box-simple').each(function () {
                this.style.removeProperty("background");
            });

        }
    });

    adjustPadding('top', '#input_padding_top', '.main-preview .single-field-input .input', 'select[name=logindes_input_padding_attr]');
    adjustPadding('bottom', '#input_padding_bottom', '.main-preview .single-field-input .input', 'select[name=logindes_input_padding_attr]');
    adjustPadding('left', '#input_padding_left', '.main-preview .single-field-input .input', 'select[name=logindes_input_padding_attr]');
    adjustPadding('right', '#input_padding_right', '.main-preview .single-field-input .input', 'select[name=logindes_input_padding_attr]');

    adjustPadding('top', '#button_padding_top', '#wp-submit', 'select[name=logindes_button_padding_attr]');
    adjustPadding('bottom', '#button_padding_bottom', '#wp-submit', 'select[name=logindes_button_padding_attr]');
    adjustPadding('left', '#button_padding_left', '#wp-submit', 'select[name=logindes_button_padding_attr]');
    adjustPadding('right', '#button_padding_right', '#wp-submit', 'select[name=logindes_button_padding_attr]');

    adjustPadding('top', 'input[name=logindes_form_bg_position_top]', '.login-box-simple', 'select[name=logindes_form_bg_padding_attr]');
    adjustPadding('bottom', 'input[name=logindes_form_bg_position_bottom]', '.login-box-simple', 'select[name=logindes_form_bg_padding_attr]');
    adjustPadding('left', 'input[name=logindes_form_bg_position_left]', '.login-box-simple', 'select[name=logindes_form_bg_padding_attr]');
    adjustPadding('right', 'input[name=logindes_form_bg_position_right]', '.login-box-simple', 'select[name=logindes_form_bg_padding_attr]');

    adjustPadding('top', 'input[name=logindes_login_bg_pos_top]', '.main-preview', 'select[name=logindes_login_padding_attr]');
    adjustPadding('bottom', 'input[name=logindes_login_bg_pos_bottom]', '.main-preview', 'select[name=logindes_login_padding_attr]');
    adjustPadding('left', 'input[name=logindes_login_bg_pos_left]', '.main-preview', 'select[name=logindes_login_padding_attr]');
    adjustPadding('right', 'input[name=logindes_login_bg_pos_right]', '.main-preview', 'select[name=logindes_login_padding_attr]');

    function adjustPadding(direction, selector, selector2, attributeEl = false) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let attr = 'px';

            if (attributeEl) {
                attr = $(attributeEl).val();
            }
            let val = $(this).val();
            $(selector2).each(function () {
                this.style.setProperty("padding-" + direction, val + attr, "important");
            });
        });
    }

    adjustBorder('border-radius', '#button_border_radius', '#wp-submit', 'select[name=logindes_button_border_radius_attr]');
    adjustBorder('border-width', '#button_border_width', '#wp-submit', 'select[name=logindes_button_border_width_attr]');
    adjustBorder('border-style', '#button_border_style', '#wp-submit');
    adjustBorder('border-color', '#button_border_color', '#wp-submit');

    adjustBorder('border-radius', '#input_border_radius', '.main-preview .single-field-input .input', 'select[name=logindes_input_border_radius_attr]');
    adjustBorder('border-width', '#input_border_width', '.main-preview .single-field-input .input', 'select[name=logindes_input_border_width_attr]');
    adjustBorder('border-style', '#input_border_style', '.main-preview .single-field-input .input');
    adjustBorder('border-color', '#input_border_color', '.main-preview .single-field-input .input');

    function adjustBorder(key, selector, selector2, attributeEl = false) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            let attr = '';

            if (attributeEl) {
                attr = $(attributeEl).val();
            }
            $(selector2).each(function () {
                this.style.setProperty(key, val + attr, "important");
            });
        });
    }

    adjustBackgroundColorImage('#logindes_bg_clear', '.background .wplc-color-grid input', '.main-preview', 'input[name=logindes_login_bg_opacity]');
    adjustBackgroundColorImage('#logindes_form_bg_clear', '.form .wplc-color-grid input', '.login-box-simple', 'input[name=logindes_form_bg_opacity]');

    function adjustBackgroundColorImage(image, selector, selector2, opacity) {
        $(document).on('change', selector, function (e) {
            e.preventDefault();

            let backgroundImage = $(image).val();
            if (backgroundImage == '1') {

                let value = $(this).val();
                let val = $(opacity).val(); // opacity value

                // Convert HEX to RGB
                let hex = value.replace('#', '');
                let r = parseInt(hex.substring(0, 2), 16);
                let g = parseInt(hex.substring(2, 4), 16);
                let b = parseInt(hex.substring(4, 6), 16);

                let finalVal = `rgba( ${r}, ${g}, ${b}, ${val}% )`;

                $(document).find(selector2).css('background-color', finalVal);
                $(document).find(selector2).css('background-image', 'unset');
            }
        });
    }

    adjustBackgroundPosition('.backgroundImagePosition', '.main-preview');
    adjustBackgroundPosition('.formBackgroundImagePosition', '.login-box-simple');
    function adjustBackgroundPosition(selector, selector2) {
        $(document).on('change', selector, function (e) {
            e.preventDefault();
            let value = $(this).val();
            $(selector2).css('background-position', value);
        });
    }

    adjustBackgroundSize('input[name=logindes_form_bg_size_height]', 'input[name=logindes_form_bg_size_width]', '.login-box-simple', 'select[name=logindes_form_bg_size_width_attr]', 'select[name=logindes_form_bg_size_h_attr]');
    adjustBackgroundSize('input[name=logindes_form_bg_size_width]', 'input[name=logindes_form_bg_size_height]', '.login-box-simple', 'select[name=logindes_form_bg_size_h_attr]', 'select[name=logindes_form_bg_size_width_attr]');
    adjustBackgroundSize('input[name=logindes_login_bg_size_h]', 'input[name=logindes_login_bg_size_w]', '.main-preview', 'select[name=logindes_login_bg_size_w_attr]', 'select[name=logindes_login_bg_size_h_attr]');
    adjustBackgroundSize('input[name=logindes_login_bg_size_w]', 'input[name=logindes_login_bg_size_h]', '.main-preview', 'select[name=logindes_login_bg_size_h_attr]', 'select[name=logindes_login_bg_size_w_attr]');

    function adjustBackgroundSize(siblings, selector, selector2, Elattr, sibblingAttr) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            let siblingVal = $(siblings).val();

            let finalVal = '';

            if (val) {
                let attr = $(Elattr).val();
                val += attr;
				
                finalVal += val;
            }

            if (siblingVal) {
                siblingVal += $(sibblingAttr).val();
                finalVal += ' ' + siblingVal;
            } else {
                finalVal += ' auto';
            }

            $(selector2).each(function () {
                this.style.setProperty('background-size', finalVal, "important");
            });
        });
    }

    adjustFormWidth('input[name=logindes_form_bg_width]', '.login-box-simple', 'select[name=logindes_form_bg_w_attr]');
    adjustFormWidth('input[name=logindes_logo_width]', '.logo-wrap img', 'px');

    function adjustFormWidth(selector, selector2, attr = 'px') {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            let unit = 'px'; // default unit

			if (attr !== 'px') {
				// attr is actually a selector like 'select[name=logindes_form_bg_h_attr]'
				unit = $(attr).val(); // unit becomes 'px' or '%'
			}
            $(selector2).each(function () {
                if ( selector2 == '.logo-wrap img' ) {
                    this.style.setProperty('max-width', val + unit, "important");
                } else {
                    this.style.setProperty('width', val + unit, "important");
                }
            });
        });
    }

    adjustFormHieght('input[name=logindes_logo_height]', '.logo-wrap img', 'px');
    adjustFormHieght('input[name=logindes_form_bg_height]', '.login-box-simple', 'select[name=logindes_form_bg_h_attr]', true);

    function adjustFormHieght(selector, selector2, attr = 'px', min = false) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            let unit = 'px'; // default unit

			if (attr !== 'px') {
				// attr is actually a selector like 'select[name=logindes_form_bg_h_attr]'
				unit = $(attr).val(); // unit becomes 'px' or '%'
			}
            $(selector2).each(function () {
                if ( selector2 == '.logo-wrap img' ) {
                    this.style.setProperty('max-height', val + unit, "important");
                } else {

                    if ( min ) {
                        this.style.setProperty('min-height', val + unit, "important");
                    } else {
                        this.style.setProperty('height', val + unit, "important");
                    }
                }
            });
        });
    }
    // Button Live Preview

    function initMediaUploader(buttonSelector, inputSelector, previewSelector, clearSelector, titleText, background = false, backgroundSelector = '', fallBackSelector = '', repeat = '', position = '', sizeW = '', sizeWAttr = '', sizeH = '', sizeHAttr = '') {
        let frame;

        $(buttonSelector).on('click', function (e) {
            e.preventDefault();

            if (frame) {
                frame.open();
                return;
            }

            frame = wp.media({
                title: titleText,
                button: { text: 'Use this image' },
                multiple: false
            });

            frame.on('select', function () {
                const attachment = frame.state().get('selection').first().toJSON();
                $(inputSelector).val(attachment.url);

                $(previewSelector).html(`
                    <button type="button" class="wplc-preview-close">&times;</button>
                    <img src="${attachment.url}" alt="Preview" class="logo-img" />
                    `);

                if (background == false && backgroundSelector != '') {
                    //logo
                    $(backgroundSelector).html('');
                    $(backgroundSelector).html(`
                        <img src="${attachment.url}" alt="Preview" class="logo-img" />
                    ` );
                }

                if (background && backgroundSelector != '') {
                    $(document).find(backgroundSelector).css('background-image', 'url(' + attachment.url + ')');
                    if ( repeat != '' ) {
                        let repeatVal = $( repeat ).val();
                        $(document).find(backgroundSelector).css('background-repeat', repeatVal);
                    }
                    
                    if ( position != '' ) {
                        let positionVal = $( position ).val();
                        $(document).find(backgroundSelector).css('background-position', positionVal);
                    }

                    let sizeVal = '';
                    if ( sizeW != '' ) {
                        sizeVal = $( sizeW ).val();
                    }

                    if ( sizeWAttr != '' ) {
                        sizeVal += $( sizeWAttr ).val();
                    }

                    let hVal = '';
                    if ( sizeH != '' ) {
                        hVal = $( sizeH ).val();
                    }

                    if ( sizeHAttr != '' ) {
                        hVal += $( sizeHAttr ).val();
                    }
                    let finalVal = '';

                    if ( sizeVal == '' ) {
                        finalVal += ' auto ';
                    } else {
                        finalVal += sizeVal;
                    }

                    if ( hVal == '' ) {
                        finalVal += ' auto ';
                    } else {
                        finalVal += hVal;
                    }

                    if ( finalVal ) {
                        $(document).find(backgroundSelector).css('background-size', finalVal);
                    }
                }
				
				if ( clearSelector == '#logindes_bg_clear' ) {
					$( '.loginBgWrapper' ).removeClass( 'hide' );
					adjustAccordionHeight('.background .accordion-head', true);
				}
				
				if ( clearSelector == '#logindes_form_bg_clear' ) {
					$( '.formBgWrapper' ).removeClass( 'hide' );
					adjustAccordionHeight('.form .accordion-head', true);
				}
				
                $(clearSelector).val('0');
            });

            frame.open();
        });

        $(document).on('click', previewSelector + ' .wplc-preview-close', function () {
            $(previewSelector).html(`
                <svg width="29" height="20" viewBox="0 0 29 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.54004 18.41H3.8964M27.46 18.41H25.1037M3.8964 18.41L10.18 5.44998L14.8928 15.17M3.8964 18.41H16.4637M16.4637 18.41L14.8928 15.17M16.4637 18.41H25.1037M14.8928 15.17L18.0346 11.12L25.1037 18.41" stroke="#A2A2A2" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="20.9797" cy="4.64" r="3.24" stroke="#A2A2A2" stroke-width="1.62" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <p class="wplc-preview-placeholder">Preview</p>
            `);

            if (background && backgroundSelector != '') {
                let fallBack = $(document).find(fallBackSelector).val();
                $(document).find(backgroundSelector).css('background-color', fallBack);
                $(document).find(backgroundSelector).css('background-image', 'unset');
            }

            if (background == false && backgroundSelector != '') {
                //logo
                $(backgroundSelector).html('');
            }
			
			if ( clearSelector == '#logindes_bg_clear' ) {
				$( '.loginBgWrapper' ).addClass( 'hide' );
				adjustAccordionHeight('.background .accordion-head', true);
			}

			if ( clearSelector == '#logindes_form_bg_clear' ) {
				$( '.formBgWrapper' ).addClass( 'hide' );
				adjustAccordionHeight('.form .accordion-head', true);
			}

            $(inputSelector).val('');
            $(clearSelector).val('1');
        });
    }

    adjustBackground('background-repeat', 'input[name=logindes_form_bg_repeat]', '.login-box-simple');
    adjustBackground('background-repeat', 'input[name=logindes_login_bg_repeat]', '.main-preview');
    // adjustBackgroundSize('', 'input[name=logindes_login_bg_size_w]', '.main-preview');
    // adjustBackgroundSize('', 'input[name=logindes_login_bg_size_h]', '.main-preview');

    function adjustBackground(key, selector, selector2) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            $(selector2).each(function () {
                this.style.setProperty(key, val, "important");
            });
        });
    }

    adjustMargin('margin-top', 'input[name=logindes_logo_top]', '.logo-wrap');
    adjustMargin('margin-bottom', 'input[name=logindes_logo_bottom]', '.logo-wrap');

    function adjustMargin(key, selector, selector2) {
        $(document).on('change input', selector, function (e) {
            e.preventDefault();
            let val = $(this).val();
            $(selector2).each(function () {
                this.style.setProperty(key, val + 'px', "important");
            });
        });
    }

    adjustOpacity('.background .wplc-color-grid input:checked', 'input[name=logindes_login_bg_opacity]', '.main-preview' , '.opacity-div');
    adjustOpacity('.form .wplc-color-grid input:checked', 'input[name=logindes_form_bg_opacity]', '.login-box-simple', '.form-opacity-div');

    function adjustOpacity(sibbling, selector, selector2, opacityDiv) {
        $( selector ).on( 'change', function(e) {
            e.preventDefault();
            let value = $( this ).val();
            value = value / 100;

            let finalValue = 1 - value;

            if ( selector == 'input[name=logindes_form_bg_opacity]' ) {
                if ( $('input[name=logindes_form_bg_transparent]').is( ':checked' ) ) {
                    finalValue = 0;
                }
            }

            $(opacityDiv).each(function () {
                this.style.setProperty('opacity', finalValue, "important");
            });

        } );
    }

    $(document).on('change input', 'input[name=logindes_logo_text]', function (e) {
        e.preventDefault();
        let val = $(this).val();

        $('.logo-text').text(val);
    });

    $(document).on('change input', 'input[name=logindes_logo_font_weight]', function (e) {
        e.preventDefault();
        let val = $(this).val();

        $('.logo-text').each(function () {
            this.style.setProperty('font-weight', val, "important");
        });
    });


    // Initialize multiple uploaders
    initMediaUploader('#logindes_upload_btn', '#logindes_bg_file', '#logindes_preview', '#logindes_bg_clear', 'Select Login Background', true, '.main-preview', '.background .wplc-color-grid input:checked', 'select[name=logindes_login_bg_repeat]', 'select[name=logindes_backgroundImagePosition]', 'input[name=logindes_login_bg_size_w]', 'select[name=logindes_login_bg_size_w_attr]', 'input[name=logindes_login_bg_size_h]', 'select[name=logindes_login_bg_size_h_attr]');
    
    
    initMediaUploader('#logindes_form_upload_btn', '#logindes_form_bg_file', '#logindes_preview_formbg', '#logindes_form_bg_clear', 'Select Form Background', true, '.login-box-simple', '.form .wplc-color-grid input:checked', 'select[name=logindes_form_bg_repeat]', 'select[name=logindes_formBackgroundImagePosition]', 'input[name=logindes_form_bg_size_width]', 'select[name=logindes_form_bg_size_width_attr]', 'input[name=logindes_form_bg_size_height]', 'select[name=logindes_form_bg_size_h_attr]');


    initMediaUploader('#logindes_logo_upload_btn', '#logindes_logo_file', '#logindes_preview_logo', '#logindes_logo_clear', 'Select Logo', false, '.logo-wrap', '');

    $(".section-login").css("max-height", "0"); // sab close by default
	
	function adjustAccordionHeight( selector, classStay = false ) {
		var $this = $(selector);
        var $wrapper = $this.closest(".main-accordion-row");
        var $section = $wrapper.find(".section-login");
		
		if ( classStay ) {
			let fullHeight = $section.prop("scrollHeight") + "px";
            $section.css("max-height", fullHeight).addClass("active");
			return;
		}

        if ($wrapper.hasClass("active")) {
            // close
			$wrapper.removeClass("active");
			$this.removeClass("active");
			$section.css("max-height", "0").removeClass("active");
        } else {
            // sab close karo
            $(".accordion-head, .main-accordion-row").removeClass("active");
            $(".section-login").css("max-height", "0").removeClass("active");

            // open
            $wrapper.addClass("active");
            $this.addClass("active");

            // actual height calculate karke lagao
            let fullHeight = $section.prop("scrollHeight") + "px";
            $section.css("max-height", fullHeight).addClass("active");
        }
	}
	
    $(".accordion-head").on("click", function () {
        adjustAccordionHeight(this);
    });

    $(".alignmentInput.logo").on("change", function () {
        let val = $(this).val();

        if (val) {
            $('.logo-wrap').css('text-align', val);
        }
        $(".wplc-align-box.logo").removeClass("active");

        $(this).siblings(".wplc-align-box.logo").addClass("active");
    });

    $(".alignmentInput.logo-text-field").on("change", function () {

        let val = $(this).val();

        if (val) {
            $('.logo-text').css('text-align', val);
        }

        $(".wplc-align-box.logo-text-field").removeClass("active");

        $(this).siblings(".wplc-align-box.logo-text-field").addClass("active");
    });

    $('#togglePassword').click(function () {
        var $pwd = $('#user_pass');
        var $eyeOpen = $(this).find('.eye-open');
        var $eyeClosed = $(this).find('.eye-closed');

        if ($pwd.attr('type') === 'password') {
            $pwd.attr('type', 'text'); // show password
            $eyeOpen.hide();
            $eyeClosed.show();
        } else {
            $pwd.attr('type', 'password'); // hide password
            $eyeOpen.show();
            $eyeClosed.hide();
        }
    });

    // Toast function
    function toast({ title = "", message = "", type = "info", duration = 3000 }) {
        const main = document.getElementById("toast");
        if (main) {
            const toast = document.createElement("div");

            // Auto remove toast
            const autoRemoveId = setTimeout(function () {
                main.removeChild(toast);
            }, duration + 1000);

            // Remove toast when clicked
            toast.onclick = function (e) {
                if (e.target.closest(".toast__close")) {
                    main.removeChild(toast);
                    clearTimeout(autoRemoveId);
                }
            };

            const icons = {
                success: "fas fa-check-circle",
                info: "fas fa-info-circle",
                warning: "fas fa-exclamation-circle",
                error: "fas fa-exclamation-circle"
            };
            const icon = icons[type];
            const delay = (duration / 1000).toFixed(2);

            toast.classList.add("toast", `toast--${type}`);
            toast.style.animation = `slideInLeft ease .3s, fadeOut linear 1s ${delay}s forwards`;

            toast.innerHTML = `
                    <div class="toast__icon">
                        <i class="${icon}"></i>
                    </div>
                    <div class="toast__body">
                        <h3 class="toast__title">${title}</h3>
                        <p class="toast__msg">${message}</p>
                    </div>
                    <div class="toast__close">
                        <i class="fas fa-times"></i>
                    </div>
                `;
            main.appendChild(toast);
        }
    }


});