{% extends "en/layout/index.html.twig" %}
{% block content %}
<style>
    .content-main {
        background: #fff !important;
    }

    div.steps-container.center {
        max-width: 1400px !important;
    }

    .checkout-main-box {
        max-width: 1400px !important;
        border: 1px solid #e0e0e0;
    }

    @media (max-width: 675px) {
        div.steps-container.center {
            max-width: 100vw !important;
        }

        .checkout-main-box {
            max-width: 100vw !important;
        }
    }

    .steps-content .steps--list .steps--entry .text {
        height: 31px !important;
    }

    .steps-container {
        padding: 0 !important;
    }

    .custom-select option {
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
    }

    .is-act-cartpage .checkout-main-box, .is-act-confirmpage .checkout-main-box, .is-act-finishpage .checkout-main-box, .is-ctl-accountorder .checkout-main-box {
        padding: 0 !important;
    }

    .steps-content .steps--list .steps--entry .text--inner, .steps-content .steps--list .steps--entry .text--inner:after {
        color: #E4E4E4;
    }

    li.steps--entry.step--configuration.is--active > a > span > span {
        color: black !important;
    }

    .steps-content .steps--list {
        background: #fff;
    }

    .steps-content .steps--list li {
        background: #fff;
    }

    .steps-content .steps--list li.is--active {
        border-bottom: 2px solid red;
        color: black;
    }

    .steps-content .steps--list .steps--entry.is--active {
        color: black;
    }


    .checkout-product-table .panel-td {
        padding: 5px 10px 14px 0px !important;
    }

    .checkout-product-table .table-header .panel-th {
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
    }

    #f_teamListContainer > div.row.main-actions > a {
        background: #E4E4E4;
        color: black;
        border-radius: 0;
    }

    #f_teamListContainer > div.row.main-actions > input[type=submit] {
        background: black;
        color: #ffffff;
        border-radius: 0;
    }

    .edit-button {
        border: 1px solid #000 !important;
        border-radius: 0 !important;
        display: none !important;
    }

    .btn-outline {
        border: 1px solid #000 !important;
        border-radius: 0 !important;
    }

    .count-plus-name {
        padding-right: 0px !important;
    }

    .table-number {
        padding-left: 0px !important;
    }

    .table-qty {
        margin-right: 0px !important;
    }

    .steps--list li span {
        font-size: 18px;
    }

    @media (max-width: 991.98px) {
        .checkout-product-table .panel-td.column-size .custom-select-icon {
            bottom: 30px !important;
        }

        .checkout-product-table .count-plus-minus .count-plus {
            bottom: 30px !important;
        }

        .checkout-product-table .count-plus-minus .count-minus {
            bottom: 15px !important;
        }
    }

    @media (max-width: 1098px) and (min-width: 991.98px) {
        .steps--list li span {
            font-size: 14px;
        }
    }

    @media (min-width: 985px) {
        .mobileSize {
            display: none;
        }
    }

    @media (max-width: 992px) {
        .mobileSize {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
        }
    }

    @media (min-width: 992px) {
        #f_teamListContainer > div.card.checkout-product-table > div > div.f_product-container > div.inner-rows.f_rows-container > div.table--tr.block-group.row-product.f_product-config-row > div.panel-td.column-size.f_column-size {
            width: 50%;
        }
    }


    .f_product-container {
        max-width: 965px;
        margin: 0 auto;
    }

    @media (max-width: 575.98px) {
        .is-act-cartpage .checkout-main-box .checkout-main, .is-act-confirmpage .checkout-main-box .checkout-main, .is-act-finishpage .checkout-main-box .checkout-main, .is-ctl-accountorder .checkout-main-box .checkout-main {
            padding: 20px !important;
        }
    }

    .mychangeSize {
        font-size: 14px !important;
    }
/* Momuto Design System */
.cart-main-title, .t2 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.02em; line-height: 1.05; }
h1.cart-main-title { font-size: 3rem; }
.panel-th { font-family: 'Outfit', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.findSize { cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3a3a3a; text-decoration: underline; display: inline; margin: 0; padding: 0; }
.size-guide-header { text-align: right; padding: 4px 0 6px; }
.label { font-family: 'Outfit', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; }
input[type=submit], .addCart { background: #0a0a0a; color: #fff; border: none; font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: 0.1em; font-size: 0.85rem; }
input[type=submit]:hover, .addCart:hover { background: #c8352e; }
.btn-outline, .button7 { background: transparent; border: 1px solid #e4e4e7 !important; color: #0a0a0a; font-family: 'Outfit', sans-serif; font-weight: 600; }
.custom-select, input.normal { border: 1px solid #e4e4e7; font-family: 'Outfit', sans-serif; font-weight: 300; color: #3a3a3a; }
.custom-select:focus, input.normal:focus { border-color: #c8352e; outline: none; }
.error-message { color: #c8352e; }
body { font-family: 'Outfit', sans-serif; font-weight: 300; color: #3a3a3a; }
</style>
<main class="content-main" x-data="myData">
    <div class="container">
        <div class="container-main">
            <div class="checkout">
                <div class="checkout-container">
                    <div class="flashbags"></div>
                    <div class="design-check-modal dato-custom-modal is--hidden" id="designCheckModal"
                         data-design-check-modal="true">
                        <div class="design-check-modal-inner dato-custom-modal-inner">
                            <div class="design-check-modal-container dato-custom-modal-container">
                                <div class="close-modal-btn" id="closeDesignCheckModal"></div>
                                <div class="design-check-container-inner dato-custom-modal-container-inner f_container">
                                    <div class="modal--description">
                                        Once you have submitted your order, we will review it in detail (e.g.
                                        logo/graphic quality). We will contact you immediately if there are any
                                        problems. If you have any questions, you can contact us at any
                                        time.<br><br>Email: info@mamutoteams.com
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="checkout-main-box">
                        <div id="sizeErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Please select size</p>
                        </div>
                        <div id="numberErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Enter number</p>
                        </div>
                        <div id="playerNameErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Enter name</p>
                        </div>
                        <div id="initialsErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Enter initials</p>
                        </div>
                        <div id="quantityErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Pick quantity</p>
                        </div>
                        <div id="minPurchaseErrorMessageContainer" class="error-message-box is--hidden">
                            <p class="error-message f_error-message">Minimum order quantity: %min_purchase% pieces</p>
                        </div>
                        <div class="checkout-main f_products-container" id="f_teamListContainer">
                            <h1 class="cart-main-title t2">CUSTOMIZE FOR YOUR TEAM</h1>
                            <p class="text-description">Personalize jerseys for your entire team. Choose sizes and enter
                                names and numbers for each player.</p>
                            <div id="loaderContainer" class="loader-container is--hidden">
                                <div id="loaderContainerBox" class="loader-container-box">
                                    <div class="loader"></div>
                                </div>
                            </div>
                            <div class="card checkout-product-table">
                                <template x-for="(item, index) in tshirts" :key="index">
                                    <div class="card-body">
                                        <div class="product-item">
                                            <div class="product-image-block">
                                                <div class="col-auto cart-item-info-img cart-item-product">
                                                    <div class="cart-item-img-link">
                                                        <img class="img-fluid cart-item-img f_lazy loaded"
                                                             title="fussball-trikot-herren-selbst-gestalten-1" alt=""
                                                             data-ll-status="loaded" :src="item.frontImg">
                                                    </div>
                                                    <div class="product-actions">
                                                        <a class="btn-outline action-button edit-button"
                                                           @click="share(item.cartId)" title="Edit"><i
                                                                class="icon-share-icon"></i>
                                                        </a>
                                                        <button class="btn-outline action-button delete-button"
                                                                @click="deleteConfig(item.cartId)" title="remove">
                                                            <i
                                                                    class="icon-trash-icon"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="description-box">
                                                <p class="cart-item-label" x-text="item.cartId">

                                                </p>
                                                <div class="description">
                                                    <p x-text="item.desc">
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="f_product-container" data-configuration-rows="true"
                                             data-id="d2f709e8cfc64ac3bc6fcc4670905bd6">
                                            <div class="inner-rows f_rows-container">
                                                <div class="size-guide-header"><span class="findSize">Find your size</span></div>
                                    <div class="table-header block-group">
                                                    <div class="panel-th column-size">SIZE</div>
                                                    <div class="panel-th column-size" x-show="item.types==1">
                                                        NAME
                                                    </div>
                                                    <div class="panel-th column-size table-number" x-show="item.types!=3">
                                                        NUMBER
                                                    </div>
                                                    <div class="panel-th column-quantity">
                                                        QUANTITY
                                                    </div>
                                                </div>
                                                <template x-for="(serial, serialIndex) in item.series"
                                                          :key="serialIndex">
                                                    <div class="table--tr block-group row-product f_product-config-row">
                                                        <div class="panel-td column-size f_column-size">
                                                            <div class="label mobileSize">SIZE <span class="findSize">Find your size</span></div>
                                                            <select name="sSize" class="custom-select mychangeSize"
                                                                    aria-label="Choose size" x-model="serial.size"
                                                                    @change="updateDetail(serial)">
                                                                <option value="" selected="" disabled="">-
                                                                </option>
                                                                <option value="XS">XS</option>
                                                                <option value="S">S</option>
                                                                <option value="M">M</option>
                                                                <option value="L">L</option>
                                                                <option value="XL">XL</option>
                                                                <option value="2XL">2XL</option>
                                                                <option value="3XL">3XL</option>
                                                            </select>
                                                            <i class="custom-select-icon icon-arrow-down-black"></i>
                                                        </div>
                                                        <div class="panel-td column-quantity field--text  count-plus-name"
                                                             x-show="item.types==1"
                                                             data-quantity-change="true" data-max="9999">
                                                            <div class="label">NAME</div>
                                                            <input type="text" aria-label="Quantity"
                                                                   class="normal f_field mychangeSize"
                                                                   required="required"
                                                                   aria-required="true" x-model="serial.name"
                                                                   name="sQuantity"
                                                                   @blur.debounce="updateDetail(serial)">
                                                        </div>
                                                        <div class="panel-td  field--text count-plus-minus f_column-number table-number" x-show="item.types!=3"
                                                             data-quantity-change="true" data-max="9999">
                                                            <div class="label">NUMBER</div>
                                                            <input type="text" aria-label="Quantity"
                                                                   class="normal f_field mychangeSize" x-model="serial.number"
                                                                   @blur.debounce="updateDetail(serial)"
                                                                   name="sQuantity">
                                                        </div>

                                                        <div class="panel-td column-quantity field--text count-plus-minus field--half table-qty"
                                                             data-quantity-change="true" data-max="9999">
                                                            <div class="label">QUANTITY</div>
                                                            <input type="text" aria-label="Quantity"
                                                                   class="normal f_field" required="required"
                                                                   aria-required="true" x-model="serial.qty"
                                                                   @change="updateDetail(serial)" name="sQuantity">
                                                            <a class="count-minus f_change"
                                                               x-on:click="handleMinus($event, serial, serialIndex)"
                                                               href="javascript:void(0);"><i
                                                                    class="icon-arrow-down-black"></i></a>
                                                            <a class="count-plus f_change" href="javascript:void(0);"
                                                               x-on:click="handlePlus($event, serial, serialIndex)"><i
                                                                    class="icon-arrow-up-black"></i></a>
                                                        </div>
                                                        <div class="column-remove">
                                                            <button type="button"
                                                                    class="btn is--small f_remove-row minus-btn"
                                                                    @click="removeRow($event, serial)"
                                                                    title="Delete row">
                                                            </button>
                                                        </div>
                                                </template>

                                            </div>
                                            <p class="add-button-title t4">Add another teammate</p>
                                            <div class="column--add">
                                                <button type="button" @click="addRow($event, item, index)"
                                                        class="btn f_add-rows plus-btn" title="Add rows">
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="d-none hidden-line-items-information" data-currency="EUR" data-shipping="4.9"
                                 data-value="58.8" data-tax="9.39">
                                <span class="hidden-line-item" data-id="d2f709e8cfc64ac3bc6fcc4670905bd6"
                                      data-name="Rio men’s football jersey" data-quantity="1" data-price="53.9">
                                </span>
                            </div>
                            <div class="row main-actions">
                                <a href="javascript: void(0);" title="Add more products"
                                   data-load-more-drafts-modal="true" data-checkout="true"
                                   class="btn btn-outline button7" @click="openTdBox()">
                                    <i class="icon--arrow-right"></i> ADD MORE PRODUCTS
                                </a>
                                <input type="submit" @click="addCart" value="PROCEED CHECKOUT">


                            </div>
                        </div>
                    </div>
                    <template data-spized-checkout-team-list=""></template>
                    <template data-spized-account-team-list=""></template>
                    <template data-questionnaire-tag=""></template>
                    <div x-show="showTdBox" class="td_bg_box" style="display: none;">
                        <div class="td_container_area">
                            <div class="td_box">
                                <div @click="setTdMudel(0)" class="td_mudel">
                                    <svg :class="activeIdx==0?'active':''" t="1685591400373" class="icon"
                                         viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="26100" width="128" height="128">
                                        <path d="M714.7 376.6v46l23.7-23.8zM526.8 249.8c43.3-2.7 71.4-15.4 82.1-37.4-2.8-0.2-5.6-0.4-8.4-0.4h-51v0.1c-0.1 16-7.4 26.9-22.7 37.7zM319.1 842.4c-5.2 0-9.5-4.3-9.5-9.5V655.7v13.9-294.2l-38.7 37c-3.7 3.7-9.7 3.7-13.4 0l-12-12v288.5V675 852.1c0 5.2 4.3 9.5 9.5 9.5h386.1c5.2 0 9.5-4.3 9.5-9.5v-10H319.1zM183.1 338.1c-3.7-3.7-3.6-9.7 0-13.4L289.9 221c3.3-3.2 6.8-6.2 10.5-8.9h-4.6c-26.1 0-51.2 10.2-69.9 28.4L119.1 344.2c-3.7 3.7-3.7 9.7 0 13.4l74.4 74.4c3.7 3.7 9.7 3.6 13.4 0l35.8-34.3-59.6-59.6z"
                                              fill="#ffffff" opacity=".3" p-id="26101"></path>
                                        <path d="M705.2 840.4H319.1c-7.4 0-13.5-6.1-13.5-13.5V378.8l-31.9 30.5c-5.2 5.2-13.7 5.2-19 0l-74.4-74.4c-2.5-2.5-3.9-5.9-3.9-9.5 0-3.6 1.4-7 4-9.5l106.8-103.8c19.6-19 45.4-29.5 72.7-29.5H415v4.2c0 15.3 9.1 29.4 25.5 39.7 18.1 11.3 43.2 17.3 72.8 17.3 29.4 0 54.2-6 71.6-17.2 15.8-10.2 24.5-24.3 24.5-39.8v-4.1h55c27.3 0 53.1 10.5 72.7 29.5l107.9 105c2.6 2.6 4 6 4 9.5 0 3.6-1.4 7-3.9 9.5l-74.4 74.4c-2.5 2.5-5.9 3.9-9.5 3.9-3.6 0-6.9-1.4-9.5-3.9l-33.1-30.8v447.1c0.1 7.4-6 13.5-13.4 13.5zM313.6 663.6v163.3c0 3 2.5 5.5 5.5 5.5h386.1c3 0 5.5-2.5 5.5-5.5V361.4l46.7 43.5c1 1 2.4 1.6 3.9 1.6 1.4 0 2.8-0.6 3.8-1.6l74.4-74.4c1-1 1.6-2.4 1.6-3.8 0-1.5-0.6-2.8-1.6-3.9l-107.9-105c-18.1-17.6-41.9-27.3-67.1-27.3h-47.2c-1.3 16.8-11.1 31.8-28 42.7-18.8 12.1-45 18.5-76 18.5s-57.7-6.4-77-18.5c-17.6-11-27.8-26-29.1-42.7h-47.4c-25.2 0-49 9.7-67.1 27.2L185.9 321.6c-1 1-1.6 2.4-1.6 3.8 0 1.5 0.6 2.8 1.6 3.8l74.4 74.4c2.1 2.1 5.6 2.1 7.7 0l45.5-43.6 0.1 303.6z"
                                              p-id="26102" fill="#ffffff"></path>
                                        <path d="M667 582.7c-2.2 0-4-1.8-4-4v-36.9c0-2.2 1.8-4 4-4s4 1.8 4 4v36.9c0 2.2-1.8 4-4 4zM667.6 737.4c-2.2 0-4-1.8-4-4v-122c0-2.2 1.8-4 4-4s4 1.8 4 4v122c0 2.2-1.7 4-4 4z"
                                              p-id="26103" fill="#ffffff"></path>
                                    </svg>
                                </div>
                                <div @click="setTdMudel(1)" class="td_mudel">
                                    <svg :class="activeIdx==1?'active':''" t="1685591317820" class="icon"
                                         viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="22340" width="128" height="128">
                                        <path d="M863.573333 914.773333h-337.92l-17.066666-221.866666-17.066667 221.866666h-341.333333l-3.413334-13.653333c0-10.24-34.133333-290.133333-34.133333-395.946667 0-98.986667 30.72-238.933333 34.133333-259.413333V180.906667c0-47.786667 37.546667-85.333333 85.333334-85.333334h546.133333c47.786667 0 85.333333 37.546667 85.333333 85.333334v64.853333c3.413333 17.066667 34.133333 157.013333 34.133334 259.413333 0 105.813333-34.133333 382.293333-34.133334 395.946667v13.653333z m-307.2-34.133333h276.48c6.826667-61.44 30.72-286.72 30.72-375.466667 0-102.4-34.133333-249.173333-34.133333-252.586666V180.906667c0-27.306667-23.893333-51.2-51.2-51.2h-546.133333c-27.306667 0-47.786667 23.893333-47.786667 51.2v71.68s-34.133333 150.186667-34.133333 252.586666c0 88.746667 23.893333 314.026667 30.72 375.466667h276.48l34.133333-392.533333h34.133333l30.72 392.533333z"
                                              fill="#ffffff" p-id="22341"></path>
                                        <path d="M167.253333 232.106667h682.666667v34.133333h-682.666667z"
                                              fill="#ffffff"
                                              p-id="22342"></path>
                                        <path d="M389.12 453.973333c0-34.133333-10.24-75.093333-17.066667-112.64-13.653333-64.853333-27.306667-122.88-3.413333-157.013333 6.826667-13.653333 20.48-20.48 37.546667-23.893333l6.826666 34.133333c-6.826667 0-10.24 3.413333-13.653333 6.826667-13.653333 20.48 0 78.506667 10.24 129.706666 10.24 40.96 17.066667 81.92 17.066667 119.466667l-37.546667 3.413333zM628.053333 453.973333h-34.133333c0-37.546667 10.24-78.506667 17.066667-119.466666 10.24-51.2 23.893333-109.226667 10.24-129.706667-3.413333-3.413333-6.826667-6.826667-13.653334-6.826667l6.826667-34.133333c17.066667 3.413333 27.306667 10.24 37.546667 23.893333 20.48 34.133333 10.24 88.746667-3.413334 157.013334-13.653333 34.133333-20.48 75.093333-20.48 109.226666z"
                                              fill="#ffffff" p-id="22343"></path>
                                    </svg>
                                </div>
                                <div @click="setTdMudel(2)" class="td_mudel">
                                    <svg :class="activeIdx==2?'active':''" t="1685591264957" class="icon"
                                         viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="21800" width="128" height="128">
                                        <path d="M542.985974 566.877091a19.948052 19.948052 0 0 1-39.882805 0.758026v-0.345766l-3.597299-344.190338a29.602909 29.602909 0 0 0-29.110857-29.59626l-0.492052-0.006649H363.61974a29.602909 29.602909 0 0 0-29.602909 29.110857v307.133507a19.948052 19.948052 0 0 1-39.896104 0.345766V223.099013c0-38.001039 30.493922-68.873974 68.355325-69.485714l1.143688-0.013299h106.283221c38.001039 0 68.873974 30.493922 69.485714 68.355325l0.013299 1.143688 3.590649 343.771429z"
                                              fill="#ffffff" p-id="21801"></path>
                                        <path d="M532.48 554.781922a19.948052 19.948052 0 0 1 4.614649 27.581507l-0.19948 0.279272-146.046338 201.023169c-36.784208 50.621506-107.639688 61.84561-158.261195 25.068052-50.122805-36.418494-61.619532-106.230026-26.158545-156.745143l0.864415-1.210182 90.298182-132.282181a19.948052 19.948052 0 0 1 27.435221-5.425871l0.285922 0.199481a19.948052 19.948052 0 0 1 5.419221 27.428571l-0.186182 0.285922-90.577454 132.694442-0.172884 0.239377c-23.831273 32.794597-16.556883 78.701714 16.237715 102.532987 32.475429 23.591896 77.797403 16.703169 101.814857-15.26026l0.724779-0.977455L504.619221 559.197091a19.948052 19.948052 0 0 1 27.860779-4.415169z"
                                              fill="#ffffff" p-id="21802"></path>
                                        <path d="M520.890182 422.180571v39.896104c-48.606753 0-71.746494 21.543896-76.846546 70.902026-3.943065 38.260364 8.577662 66.65974 38.60613 87.944312l0.910961 0.638338-22.780675 32.754701c-42.722078-29.722597-61.885506-72.471273-56.41974-125.433351 7.094857-68.734338 46.405818-105.950753 114.455272-106.688831l2.074598-0.013299zM520.890182 237.621195v39.896104H314.068779v-39.896104z"
                                              fill="#ffffff" p-id="21803"></path>
                                        <path d="M876.916364 566.877091a19.948052 19.948052 0 0 1-39.882806 0.758026v-0.345766l-3.597298-344.190338a29.602909 29.602909 0 0 0-29.110857-29.59626l-0.492052-0.006649h-106.283221a29.602909 29.602909 0 0 0-29.602909 29.110857v307.133507a19.948052 19.948052 0 0 1-39.896104 0.345766V223.099013c0-38.001039 30.493922-68.873974 68.355325-69.485714l1.143688-0.013299h106.283221c38.001039 0 68.873974 30.493922 69.485714 68.355325l0.013299 1.143688 3.590649 343.771429z"
                                              fill="#ffffff" p-id="21804"></path>
                                        <path d="M866.41039 554.781922a19.948052 19.948052 0 0 1 4.614649 27.581507l-0.199481 0.279272L724.779221 783.66587c-36.784208 50.621506-107.639688 61.84561-158.261195 25.068052-50.122805-36.418494-61.619532-106.230026-26.158545-156.745143l0.864415-1.210182 90.298182-132.282181a19.948052 19.948052 0 0 1 27.435221-5.425871l0.285922 0.199481a19.948052 19.948052 0 0 1 5.419221 27.428571l-0.186182 0.285922-90.577455 132.694442-0.172883 0.239377c-23.831273 32.794597-16.556883 78.701714 16.237714 102.532987 32.475429 23.591896 77.797403 16.703169 101.814858-15.26026l0.724779-0.977455 146.046337-201.016519a19.948052 19.948052 0 0 1 27.86078-4.415169z"
                                              fill="#ffffff" p-id="21805"></path>
                                        <path d="M854.820571 422.180571v39.896104c-48.606753 0-71.746494 21.543896-76.846545 70.902026-3.943065 38.260364 8.577662 66.65974 38.60613 87.944312l0.910961 0.638338-22.780675 32.754701c-42.722078-29.722597-61.885506-72.471273-56.419741-125.433351 7.094857-68.734338 46.405818-105.950753 114.455273-106.688831l2.074597-0.013299zM854.820571 237.621195v39.896104H647.999169v-39.896104z"
                                              fill="#ffffff" p-id="21806"></path>
                                    </svg>
                                </div>
                                <div @click="setTdMudel(3)" class="td_mudel">
                                    <svg t="1685602290461" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="8907" width="128" height="128">
                                        <path d="M917 306l-2.22-0.68a71.61 71.61 0 0 1-50.59-68.6V221h38.61zM634 306l2.22-0.68a71.61 71.61 0 0 0 50.59-68.6V221h-38.64zM144.38 789.77l-4.73 22.08-48.89-7.88-1.57-23.66 55.19 9.46zM564.64 790.56l4.73 22.08 48.89-7.89 1.58-23.65-55.2 9.46zM293.4 246.92c10.48 16.5 40 27.6 62.29 27.6s50.24-11.1 60.72-27.6z"
                                              fill="#ffffff" p-id="8908"></path>
                                        <path d="M194.48 379a4 4 0 0 0-4 4v10a4 4 0 0 0 8 0v-10a4 4 0 0 0-4-4zM515.33 379a4 4 0 0 0-4 4v10a4 4 0 1 0 8 0v-10a4 4 0 0 0-4-4zM920.94 306.33l-15.6-109.84a21.44 21.44 0 0 0-18.9-18.3L831 172.12a514.71 514.71 0 0 0-111.9 0l-55.49 6.07a21.44 21.44 0 0 0-18.9 18.3l-15.6 109.84a487.82 487.82 0 0 0-4.55 85.74l17.68 276.68q0.81 23.25 3.1 46.4l18.2 174a5.45 5.45 0 0 0 5.42 4.88h56.23a5.44 5.44 0 0 0 5.41-4.83l19.6-171.71c2.57-17 4.62-53.36 6.15-70.46l13.25-219.95v-0.15a5.45 5.45 0 0 1 10.88 0v0.15L793.7 647c1.53 17.1 3.58 53.49 6.15 70.46l20.57 171.74a5.46 5.46 0 0 0 5.41 4.8h56.24a5.45 5.45 0 0 0 5.42-4.91l17.22-173.94q2.29-23.14 3.1-46.4l17.68-276.68a487.82 487.82 0 0 0-4.55-85.74z m-15.84 2.25c0.17 1.2 0.33 2.41 0.49 3.61C875.69 300 857 271.15 857 235.43V225h36.23z m-23.29-114.8l2.89 0.31a5.45 5.45 0 0 1 4.8 4.65l2.59 18.26h-10.28zM856.05 191l19.45 2.13V217h-19.45z m-25.76-2.82l19.45 2.13V217h-19.45zM804.53 186q9.75 0.57 19.45 1.53V217h-19.45z m-25.76-0.87q9.71 0.07 19.45 0.53V217h-19.45z m-25.76 0.47c6.49-0.28 13-0.44 19.45-0.47V217H753z m-25.76 1.8c6.46-0.62 13-1.11 19.46-1.48V217h-19.46z m-25.76 2.78l19.3-2.12h0.21v29h-19.51zM675.74 193l19.45-2.12V217h-19.45z m-15.24 5.79a5.45 5.45 0 0 1 4.8-4.65l4.13-0.45V217h-11.52z m-15.6 109.79L656.77 225H694v10.43c0 36.14-19.14 65.27-49.65 77.18 0.18-1.34 0.36-2.69 0.55-4.03z m264.61 82.7l-17.66 276.45v0.46c-0.52 15.09-1.55 30.36-3 45.39L872.51 878H835.2l-19.47-162.44v-0.49c-1.66-11-3.18-31.73-4.4-48.4-0.58-7.89-1.12-15.34-1.62-20.86l-13.23-219.7V426a21.45 21.45 0 0 0-42.82 0v0.12l-13.31 219.69c-0.5 5.53-1 13-1.62 20.87-1.22 16.67-2.74 37.41-4.4 48.39v0.58L715.72 878h-37.31l-17.2-164.47c-1.49-15-2.51-30.27-3-45.34V667.77l-17.72-276.49a473.87 473.87 0 0 1 2.76-69.74 82.47 82.47 0 0 0 42.15-31C696.26 275.07 702 256 702 235.43V225h147v10.43c0 20.59 5.74 39.64 16.6 55.11a82.33 82.33 0 0 0 41.11 30.64 473.28 473.28 0 0 1 2.8 70.1z"
                                              fill="#ffffff" p-id="8909"></path>
                                        <path d="M606.16 546.28a661.41 661.41 0 0 0-23.9-105.57l-42.53-135.29a71.46 71.46 0 0 0-39.37-45.84l-55.33-25a6.3 6.3 0 0 0-7.91 2.35l-1.82 2.84H274.51l-1.82-2.84a6.3 6.3 0 0 0-7.91-2.35l-55.33 25a71.48 71.48 0 0 0-39.37 45.84l-42.53 135.29a661.41 661.41 0 0 0-23.9 105.57L74.94 754.6a10.56 10.56 0 0 0 3 8.93l3.31 3.32a10.55 10.55 0 0 1 3.09 7.75l-1.14 41.23a12.55 12.55 0 0 0 10.56 12.75l51.24 8.27a13.72 13.72 0 0 0 2 0.16 12.57 12.57 0 0 0 12.14-9.36l9.69-36.65a10.69 10.69 0 0 1 7.57-7.52 10.54 10.54 0 0 0 7.39-7.47l0.69 37.57a6.3 6.3 0 0 0 6.31 6.19H519a6.3 6.3 0 0 0 6.31-6.19L526 776a10.54 10.54 0 0 0 7.4 7.47A10.69 10.69 0 0 1 541 791l9.71 36.69a12.57 12.57 0 0 0 12.12 9.31 13.61 13.61 0 0 0 2-0.16l51.22-8.27a12.56 12.56 0 0 0 10.57-12.75l-1.15-41.23a10.55 10.55 0 0 1 3.09-7.75l3.31-3.32a10.53 10.53 0 0 0 3-8.93zM430 247.75a84.67 84.67 0 0 1-68.59 35h-13a84.69 84.69 0 0 1-68.6-35z m-285.55 572.8l-45.19-7.28 0.83-29.71 51.66 9.4zM199.8 776h9.63v27.76h-9.13z m138.42 0v27.76h-19.45V776z m-25.76 27.76H293V776h19.45z m-25.75 0h-19.46V776h19.46z m-25.76 0h-19.46V776H261z m-25.76 0h-19.45V776h19.45z m109.34 0V776H364v27.76h-19.47zM492.78 776v27.76h-19.45V776zM467 803.73h-19.43V776H467z m-25.76 0h-19.43V776h19.45z m-25.76 0h-19.43V776h19.45z m-25.76 0h-19.43V776h19.45z m109.35 0V776H510l-0.51 27.76z m66.27 16.82l-7.14-27 51.52-9.37 0.81 29.07z m51.9-65a26.66 26.66 0 0 0-7.75 19.45v1.07l-53.39 9.71a26.73 26.73 0 0 0-15.39-16.75l-21.41-80.9V433a4 4 0 0 0-8 0v270.8l-1.2 65.87H199.68l-1.2-65.87V433a4 4 0 0 0-8 0v255.17l-21.41 80.9a26.79 26.79 0 0 0-15.2 16.14l-53.56-9.74v-0.42a26.62 26.62 0 0 0-7.76-19.52l-1.4-1.39 28.35-205.68a646.78 646.78 0 0 1 23.31-103l42.54-135.29 0.07-0.24 0.07-0.25A55.31 55.31 0 0 1 216 274.16l47.7-21.57a100.25 100.25 0 0 0 84.67 46.19h13a100.25 100.25 0 0 0 84.66-46.19l47.7 21.57a55.31 55.31 0 0 1 30.55 35.57l0.07 0.25 0.08 0.24L567 445.51a647.13 647.13 0 0 1 23.31 103l28.34 205.65z"
                                              fill="#ffffff" p-id="8910"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="btn btn-warning closeBtn" @click="closeTdBox()">Close</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style>
        .custom-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .custom-modal-content {
            background-color: #fff;
            max-width: 80%;
            max-height: 90%;
            margin: 5% auto;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            overflow: auto;
            position: relative; /* Added */
        }

        .custom-modal-close {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 34px;
            font-weight: bold;
            cursor: pointer;
            padding: 5px;
        }

        .custom-modal-content h2 {
            text-align: left;
            margin-bottom: 70px;
        }

        table tr:nth-child(odd) {
            background-color: #B1B0B4;
        }

        table th {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
            background-color: black;
            color: white;
            font-size: 12px;
            text-transform: uppercase;
        }

        table td {
            font-size: 12px;
            font-weight: 100;
            border: 1px solid black;
            padding: 0.4em;
            text-align: center;
        }

        .mytable_top {
            margin-bottom: 40px;
        }
    </style>

    <div id="customModal" class="custom-modal">
        <div class="custom-modal-content">
            <span class="custom-modal-close">&times;</span>
            <h2>SIZE GUIDE</h2>
            <div class="mytable_top">
                <table class="fl-table" style="width:100%;">
                    <tbody>
                    <tr>
                        <th>SIZE</th>
                        <th>CHEST (CM)</th>
                        <th>WEIGHT RANGE (KG)</th>
                        <th>HEIGHT RANGE (CM)</th>
                    </tr>
                    <tr>
                        <td>XS</td>
                        <td>86-91</td>
                        <td>50-60</td>
                        <td>160-165</td>
                    </tr>
                    <tr>
                        <td>S</td>
                        <td>91-96</td>
                        <td>60-70</td>
                        <td>165-170</td>
                    </tr>
                    <tr>
                        <td>M</td>
                        <td>96-101</td>
                        <td>70-80</td>
                        <td>170-175</td>
                    </tr>
                    <tr>
                        <td>L</td>
                        <td>101-106</td>
                        <td>80-90</td>
                        <td>175-180</td>
                    </tr>
                    <tr>
                        <td>XL</td>
                        <td>106-111</td>
                        <td>90-100</td>
                        <td>180-185</td>
                    </tr>
                    <tr>
                        <td>2XL</td>
                        <td>111-116</td>
                        <td>100-110</td>
                        <td>185-190</td>
                    </tr>
                    <tr>
                        <td>3XL</td>
                        <td>116-121</td>
                        <td>110-120</td>
                        <td>190-195</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</main>
<script>

    $(document).ready(function () {
        $(".custom-modal-close").on('click', function () {
            $("#customModal").hide();
        });


        $(document).on("click", ".findSize", function () {
            $("#customModal").show();
        });


        function checkCookie(cookieName) {
            // 获取所有的 cookie
            var cookies = document.cookie.split(';');

            // 遍历每个 cookie
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();

                // 判断当前 cookie 是否以指定的名称开头
                if (cookie.indexOf(cookieName + '=') === 0) {
                    // 如果存在以指定名称开头的 cookie，则返回 true
                    return true;
                }
            }

            // 如果没有找到指定名称的 cookie，则返回 false
            return false;
        }

    });

    function getQueryParam(key) {
        const query = window.location.search.substring(1);
        const vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) === key) {
                return decodeURIComponent(pair[1] || '');
            }
        }
        return null;
    }


    function myData() {
        return {
            msg: 'Tirst',
            isLogin: false,
            tshirts: [],//cart data
            tdMudelName: ['mamuto2', 'mamuto2shorts1', 'mamuto2socks1', 'mamuto3suit1', 'mamuto3', 'mamuto3shorts3', 'mamuto3socks3', 'mamuto3suit3', 'mamuto3basket3', 'handball'],
            tdMudel: '',//now 3d mudel
            showTdBox: false,//show 3d select box
            activeIdx: 0, //3d select box option active
            uuid: '',
            offset: true,
            handlePlus: async function (event, item, index) {
                item.qty = item.qty + 1;
                await this.updateDetail(item);
            },
            handleMinus: async function (event, item, index) {
                if (item.qty == 1) return;
                item.qty = item.qty - 1;
                await this.updateDetail(item);
            },
            setTdMudel(idx) {
                this.activeIdx = idx;
                this.tdMudel = this.tdMudelName[idx];
                this.addMoreDesign();
            },
            openTdBox() {
                // this.showTdBox = true;
                this.tdMudel = 'mamuto3suit1'
                this.addMoreDesign();
            },
            closeTdBox() {
                this.showTdBox = false;
            },
            getUuid: async function () {
                this.uuid = getQueryParam('uuid') ? getQueryParam('uuid') : '';
                if (!this.uuid) {
                    this.uuid=localStorage.getItem('UUID3D');
                }
                if (!this.uuid) {
                    const url = '/uuid';
                    let res = await fetch(url, {
                        method: 'get',
                        headers: {
                            "Content-Type": "application/json",
                        }
                    });
                    const data = await res.json();
                    if (data.code == 200 && data.uuid) {
                        this.uuid = data.uuid;
                        localStorage.setItem('UUID3D', this.uuid);
                    }
                }else{
                    localStorage.setItem('UUID3D', this.uuid);
                }
            },
            addRow: async function (event, item, index) {
                console.log(event);
                console.log(item);
                console.log(index);
                const cartId = item.cartId;
                const url = '/v1/items';
                await fetch(url, {
                    method: 'post',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({cartId})
                });
                await this.getConfigInfo()
            },
            removeRow: async function (event, item) {
                const id = item.id;
                const url = '/v1/items';
                await fetch(url, {
                    method: 'delete',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({id})
                });
                await this.getConfigInfo();
            },
            getTotal: function () {

                let sum = 0;
                this.tshirts.forEach(item => {
                    item.series.forEach(series => {
                        sum += series.qty;
                    });
                });
                return sum;
            },
            async updateDetail(data) {
                const url = '/v1/items';
                const res = await fetch(url, {
                    method: 'put',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(data)
                });
                await this.getConfigInfo();
            },
            async deleteConfig(id) {
                const url = '/v1/config/' + id;
                const res = await fetch(url, {method: 'delete'});
                const data = await res.json();
                this.getConfigInfo();
            },
            //这个地方只是分享查看
            share(cartId) {
                $.ajax({
                    url: "./cart/share",
                    type: "post",
                    dataType: "json",
                    data: {"cartId": cartId},
                    success: function (data) {
                        window.open(data.jump_url);
                    }
                })
            },
            async getConfigInfo() {
                const url = '/v1/items/' + this.uuid;
                const res = await fetch(url);
                const data = await res.json();
                this.tshirts = data;
            },

            async isLogin() {
                const url = 'isLogin';
                const res = await fetch(url);
                const data = await res.json();
                this.isLogin = data.data;
            },
            addCart() {
                if (!this.offset) {
                    return false;
                }
                this.offset = false;
                if (this.tshirts.length < 1) {
                    Layer.toast('Shopping cart is empty');
                    this.offset = true;
                    return false;
                }
                let error_id = '';
                this.tshirts.forEach(item => {
                    if (item.series.length < 1 && !error_id) {
                        error_id = item.cartId;
                    }
                })
                if (error_id) {
                    Layer.toast(error_id + ':sku is empty');
                    this.offset = true;
                    return false;
                }
                if (!this.isLogin) {
                    Layer.toast('Please log in first');
                    setTimeout(function () {
                        this.offset = true;
                        window.location.href = "login";
                    }, 2500);
                } else {
                    const url = 'getCartRedirect/' + this.uuid;
                    fetch(url, {method: 'post'}).then(response => {
                        this.offset = true;
                        response.json().then((data) => {
                            if (data.code == 200) {
                                if (data.redirecUrl) {
                                    window.location.replace(data.redirecUrl);
                                }
                            } else {
                                Layer.toast(data.message);
                            }
                        }).catch((err) => {
                            console.log(err);
                        })
                    });
                }
            },
            generateRandomString(length) {
                var result = '';
                var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                var charactersLength = characters.length;
                for (var i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                return result;
            },
            addMoreDesign() {
                const configId = this.generateRandomString(8);
                collectionName = this.tdMudel;
                let url = '';
                if (collectionName === 'mamuto3suit1') {
                    url = '/3d-configurator/configurator.html?userId=' + this.uuid + '&configId=' + configId + '&suitName=' + collectionName + '&langguage=en';
                } else {
                    url = '/3d-configurator/configurator.html?userId=' + this.uuid + '&configId=' + configId + '&collectionName=' + collectionName + '&langguage=en';
                }
                window.location.href = url;
            },
            init() {
                let that=this;
                this.isLogin();
                this.getUuid();
                let timerData= setInterval(function(){
                    if(that.uuid){
                        clearInterval(timerData);
                        that.getConfigInfo();
                    }
                },280);

                //init 3d mudel
                this.tdMudel = localStorage.getItem('collectionName') ? localStorage.getItem('collectionName') : this.tdMudelName[0];
            }
        }
    }
</script>
<style>
    .td_bg_box {
        width: 100vw;
        height: 100vh;
        z-index: 999999;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.9;
        background: #e0e0e0;
    }

    .td_container_area {
        width: 500px;
        height: 180px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 15%;
        background: #0f1213;
    }

    .td_container_area .td_box {
        display: flex;
        width: 100%;
        height: 80px;
        overflow: hidden;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .td_box .td_mudel {
        width: 25%;
        text-align: center;
        font-size: 26px;
        color: #fff;
        cursor: pointer;
    }

    .td_box .td_mudel svg {
        font-size: 40px;
    }

    .td_box .td_mudel svg.active {
        border: 2px solid #c8352e;
    }

    .closeBtn {
        width: 90%;
        height: 35px;
        line-height: 35px;
        overflow: hidden;
        margin: 0 auto;
        margin-left: 5%;
        margin-top: 35px;
        background: #c8352e;
        color: #fff;
        border-radius: 5px;
    }

    .closeBtn:hover {
        background: #c8352e;
        color: #fff;
    }

    @media (max-width: 765px) {
        .td_container_area {
            width: 90%;
            margin-top: 25%;
        }
    }
</style>
{% endblock %}