{% if section.settings.enable_simulator_ship == true %}

    <style>

        :root {
            --color-one-cart: {{section.settings.color_one_cart}};
            --color-two-cart: {{section.settings.color_two_cart}};
            --color-three-cart: {{section.settings.color_three_cart}};
            --color-for-cart: {{section.settings.color_for_cart}};
            --color-five-cart: {{section.settings.color_five_cart}};

            --color-one-light-cart: {{section.settings.color_one_cart  | color_lighten: 57 }};
            --color-one-light-1-cart: {{section.settings.color_one_cart | color_lighten: 57 | color_modify: 'alpha', 0.5 }};

        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }

        .cart-item-title a {
            color: var(--color-two-cart);
        }

        .cart-finish-coupon {
            overflow: hidden;
            border-radius: 4px;
            color: var(--color-one-cart);
        }

        .cart-finish-coupon-content {
            margin-top: 20px;
            background-color: var(--color-one-light-cart);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            row-gap: 12px;
            column-gap: 5px;
        }

        .cart-finish-coupon-shipping {
            display: flex;
            justify-content: space-between;
            background: var(--color-one-light-1-cart);
            max-height: 0;
            padding: 0 18px;
            font-size: 13px;
            transition: all .4s;
        }

        .cart-finish-coupon-shipping.open-coupon-info {
            padding: 14px 18px;
            max-height: 100vh;
        }

        .cart-coupon-title {
            font-size: 14px;
            font-weight: 600;
        }

        .cart-coupon-input {
            max-width: 33%;
            min-width: 50px;
            height: 38px;
            border: 1px solid #fff;
            border-radius: 4px;
        }

        .cart-coupon-input:focus {
            border: 1px solid var(--color-one-cart);
        }

        .cart-coupon-input:focus {
            outline: none;
        }

        .cart-coupon-button {
            height: 38px;
            background-color: var(--color-one-cart);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 0 10px;
        }

        .cart-buy-now button {
            background: var(--color-three-cart);
            border-radius: 4px;
            outline: none;
            border: none;
            color: #fff;
            padding: 7px 14px;
            font-size: 16px;
            width: 100%;
        }

        .cart-buy-more a {
            color: var(--color-one-cart);
            font-size: 15px;
        }

        .cart-buy-more a:hover {
            text-decoration: underline;
        }

        @media only screen and (max-width: 780px) {

            .cart-finish-coupon-content {
                flex-wrap: wrap;
                justify-content: center;
            }

            .cart-coupon-input {
                max-width: none;
                flex-basis: 100%;
            }

            .cart-buy-now button {
                font-size: 15px;
            }

            .cart-buy-more a {
                font-size: 13px;
            }

            .cart-coupon-input, .cart-coupon-button {
                height: 32px;
            }
        }

        .cart-empty-button button {
            border: none;
            background-color: var(--color-three-cart);
            border-radius: 4px;
            color: #fff;
            font-weight: 600;
            padding: 7px 14px;
        }

    </style>

    <div class="cart-finish-coupon">
        <div class="cart-finish-coupon-content">
            <div class="cart-coupon-title">
                {{ section.settings.title_simulator_ship }}
            </div>

            <input class="cart-coupon-input" type="number" placeholder="CEP" id="cart_cep_input">

            <button type="button" class="cart-coupon-button" id="cart_cep_button" onclick="getCepData()">
                {{ section.settings.button_simulator_ship }}
            </button>
        </div>

        <div class="cart-finish-coupon-shipping" id="data_of_cep">
            <div id="destination_ship">

            </div>
            <div>
                <span id="time_ship_1"></span>
                <span id="time_ship_2"></span>
            </div>

            <div id="price_ship">

            </div>
        </div>
    </div>

    <script type="lazyload2">
        //Consulta e cep estimativa de envio
        document.getElementById('cart_cep_input').oninput = function () {
            if (this.value.length > 8) {
                this.value = this.value.slice(0, 8);
            }
        }

        function getCepData() {
            let cep = document.getElementById('cart_cep_input').value
            if (cep != "" && cep.length == 8) {
                document.getElementById('cart_cep_button').innerHTML = 'Carregando'

                fetch(`https://viacep.com.br/ws/${cep}/json/`)
                    .then(response => {
                        response.json()
                            .then(data => showData(data))
                    })
                    .finally(function () {
                        setTimeout(function () {
                            document.getElementById('cart_cep_button').innerHTML = `{{ section.settings.button_simulator_ship }}`

                        }, 150)
                    })
            }
        }

        function showData(data) {
            let firstDate = {{ section.settings.first_date }}
                let
            secondDate = firstDate + {{ section.settings.interval_date }}

            if (data.erro != "true") {
                document.getElementById("data_of_cep").classList.add("open-coupon-info")

                document.getElementById("time_ship_1").innerHTML = `de ${firstDate} até `
                document.getElementById("time_ship_2").innerHTML = `${secondDate} dias úteis`
                document.getElementById("destination_ship").innerHTML = data.localidade
                document.getElementById("price_ship").innerHTML = `{{ section.settings.price_simulator_ship }}`
            } else {
                document.getElementById("data_of_cep").classList.add("open-coupon-info")
                document.getElementById("destination_ship").innerHTML = "CEP não encontrado"
                document.getElementById("time_ship_1").innerHTML = ""
                document.getElementById("time_ship_2").innerHTML = ""
                document.getElementById("price_ship").innerHTML = ""
            }

        }
    </script>
{% endif %}
