<section class="woo-commerce mt-5">
    <div class="product">
        <div class="container">
            <div class="row gx-5">
                <div class="col-12 col-md-5">
                    {{{ gallery }}}
                </div>
                <div class="col-12 col-md-7">
                    <h1 class="product-title">{{#productTitleFormatter product.title }}</h1>
                    <!-- <p><a href="/resources/reviews/"><img src="/wp-content/themes/medicalalert/assets/media/images/reviews_icon.png"> <span style="font-size:16px; font-weight:600;">Read Reviews &#8594;</span> </a></p> -->
                    <div class="product-description mb-4 mt-3">
                        <p>{{{ product.excerpt }}}</p>
                    </div>
                    <div class="connection-types">
                        {{#if showHomeOptions}}
                        <div class="connection-types mt-4">
                            <p class="option-heading">Select Your System Type:</p>
                            {{#if currentProductIsHome}}
                            {{#each homesystemProducts}}
                            <a class="me-3" href="{{ permalink }}" data-product-id={{ id }}>
                                {{ _product_attributes.connection-type.value }}</a>
                            {{/each}}
                            {{/if}}
                        </div>
                        {{/if}}

                        {{#if showOTGOptions}}
                        <div class="connection-types mt-4">
                            <div class="f-black fs-sm fw-bold mb-1">Select Your System Type:</div>
                            {{#each OTGProducts}}
                            <a class="me-3 f-black fw-normal" href="{{ permalink }}" data-product-id={{ id }}>
                                {{ _product_attributes.connection-type.value }}
                            </a>
                            {{/each}}
                        </div>
                        {{/if}}


                        <div class="d-flex align-items-center">
                            <div class="select-plan container-fluid p-0">
                                <div class="row">
                                    <div class="col">
                                        <label for="variation-select" class="f-black mt-3">Select a plan:</label>
                                        <form class="variations_form" method="post" enctype="multipart/form-data">
                                            <div class="d-lg-flex">
                                                <div>
                                                    <select class="form-select p-2" name="variation_id" id="variation-select">
                                                        {{#each variation}}
                                                        <option value="{{{variation_id}}}">{{{attributes.attribute_rate-plan}}} | {{{price_html}}}</option>
                                                        {{this}}
                                                        {{/each}}
                                                    </select>
                                                </div>
                                                <div>
                                                    <button type="submit" class="btn btn-red mt-2 mt-lg-0 ms-lg-2">Buy Now</button>
                                                </div>
                                            </div>
                                            <h6 class="f-purple fw-bold mb-0 mt-3">Includes free shipping and lockbox! </h6>
                                            <div class="mb-3">{{product.fee_text}}</div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <p class="fw-bold mt-3 fs-6">About the product:</p>
                        <ul class="mb-5 fs-6 about-product">
                            {{#each product.about_product_lines}}
                            <li><strong class="fw-bold">{{ bold_text }}:</strong> {{ regular_text }}</li>
                            {{/each}}
                        </ul> -->
                    </div>

                </div>
            </div>
        </div>
        {{{ flex-content }}}
</section>

<style>
    .connection-types a {
        color: #000000;
        text-decoration: none;
        font-size: 16px;
        line-height: 30px;
        font-weight: 700;
        text-decoration: none;
    }

    @media (max-width: 412px) {
        .button--primary {
            font-size: 14px;
            padding: 15px 15px;
            line-height: unset;
        }
    }

    @media screen and (max-width: 387px) {
        .button--primary {
            font-size: 13px;
            padding: 17px 15px;
            line-height: unset;
        }
    }

    @media screen and (min-width: 767px) and (max-width: 991px) {
        .button--primary {
            font-size: 1rem;
            padding: 8px 14px;
        }
    }

    .select-selected.select-arrow-active~.select-items .select-hide:first-child {
        display: none;
    }

    .custom-select .select-selected {
        color: black;
    }

    .custom-select .select-items div {
        color: black;
    }

    .custom-select .select-items div:hover {
        color: white;
    }

    .custom-select .select-selected.select-arrow-active {
        color: black;
    }

    #price {
        display: block;
    }

    #selected-text {
        color: #000066;
        margin: 5px;
        font-weight: 700;
    }

    #selected-price {
        margin-top: 20px;
    }

    #price {
        margin-top: 20px;
    }

    .container {
        dispaly: table;
        width: 100%;
    }

    .column {
        display: table-cell;
        padding: 16px;
    }

    .button--primary {
        margin-top: 25px;
    }

    .fee-text {
        font-size: 15px;
        margin: 5px;
    }

    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
        color: #000066;
        font-weight: 700;
        line-height: 0px;
        font-size: 1.25em;
    }

    .custom-select {
        position: relative;
        font-family: Arial;
    }

    .custom-select select {
        display: none;
    }

    .form-select {
        width: 100%;
        max-width: 327px;
    }

    .select-selected {
        background-color: #fff;
        color: #000;
    }

    .select-items div,
    .select-selected {
        color: #000;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: #d3d3d3;
        cursor: pointer;
        line-height: 36px;
    }

    .select-items {
        position: absolute;
        background-color: #fff;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        border: 1px solid transparent;
        border-color: #d3d3d3;
    }

    .select-hide {
        display: none;
    }

    .select-items div:hover,
    .same-as-selected {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .select-items div {
        color: #fff;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .select-items div:hover {
        background-color: #000066;
    }

    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
        width: 100%;
        float: none;
    }

    .woocommerce-product-gallery ol li img {
        border: 1px solid darkgray;
    }

    .woocommerce div.product div.images .flex-control-thumbs {
        text-align: center;
    }

    .woocommerce div.product div.images .flex-control-thumbs li {
        margin: .5rem;
        width: 85px;
        display: inline-block;
        float: none;
    }

    .product-title {
        margin-bottom: 0;
    }

    .option-heading {
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 40px;
        color: #505050;
    }

    .stars {
        font-size: 15px;
    }

    .stars i {
        color: #ffbb00;
        margin-right: 1px;
    }

    strong {
        font-weight: bold;
    }

    .about-product li {
        line-height: 24px;
    }

    label {
        display: block;
        margin-bottom: 0;
        font-weight: 700;
        color: #505050;
        font-size: 1rem !important;
    }

    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 20px;
    }

    .select-selected::after {
        content: "\f0d7";
        font-family: 'FontAwesome', Verdana;
        position: absolute;
        top: 20px;
        right: 20px;
        transform: translateY(-50%);
        color: #000;
        pointer-events: none;
    }

    .col-select,
    .col-button {
        height: 11em !important;
    }
</style>

<script>

    var currentProductID = {{ product.id }};
    $(".wearing-style a, .connection-types a, .standardVsAutoAlert a").each(function () {
        var ele = $(this);
        if (ele.data("product-id") == currentProductID || $("h1").text().trim() === $(this).text().trim()) {
            ele.html("<i class='bi bi-circle-fill'></i>" + ele.html());
        } else {
            ele.html("<i class='bi bi-circle'></i>" + ele.html());
        }
    });


    var x, i, j, l, ll, selElmnt, a, b, c;
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        ll = selElmnt.length;
        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);
        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");
        for (j = 0; j < ll; j++) {

            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function (e) {
                var y, k, s, h, sl, yl;
                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                sl = s.length;
                h = this.parentNode.previousSibling;
                for (k = 0; k < sl; k++) {
                    if (s.options[k].innerHTML == this.innerHTML) {
                        s.selectedIndex = k;
                        h.innerHTML = this.innerHTML;
                        if (this.innerHTML === "Annually | $19.95" || this.innerHTML === "Annually | $29.95" || this.innerHTML === "Annually | $34.95" || this.innerHTML === "Annually | $39.95") {
                            document.getElementById("selected-text").innerHTML = "Includes free shipping and lockbox! ";
                        } else if (this.innerHTML === "Semi-Annually | $24.95" || this.innerHTML === "Semi-Annually | $34.95" || this.innerHTML === "Semi-Annually | $44.95" || this.innerHTML === "Semi-Annually | $37.95" || this.innerHTML === "Semi-Annually | $37.95") {
                            document.getElementById("selected-text").innerHTML = "Includes free shipping!";
                        } else if (this.innerHTML === "Monthly | $27.95" || this.innerHTML === "Monthly | $37.95" || this.innerHTML === "Monthly | $39.95" || this.innerHTML === "Monthly | $47.95" || this.innerHTML === "Monthly | $34.95") {
                            document.getElementById("selected-text").innerHTML = "";

                        }
                    }
                }
                h.click();
            });
            c.setAttribute("data-price", selElmnt.options[j].getAttribute("data-price"));
            b.appendChild(c);
        }
        x[i].appendChild(b);
        a.addEventListener("click", function (e) {
            e.stopPropagation();
            closeAllSelect(this);
            var items = this.nextElementSibling;
            items.classList.toggle("select-hide");
            this.classList.toggle("select-arrow-active");
        });

        // Close the dropdown when clicking outside of it
        document.addEventListener("click", function (e) {
            closeAllSelect(null);
        });
    }

    function closeAllSelect(elmnt) {
        var x = document.getElementsByClassName("select-items");
        var y = document.getElementsByClassName("select-selected");
        for (var i = 0; i < x.length; i++) {
            if (y[i] && (elmnt !== y[i].parentNode)) {
                x[i].classList.add("select-hide");
                y[i].classList.remove("select-arrow-active");
            }
        }
    }
    document.addEventListener("click", closeAllSelect);

</script>