{% assign bundle_count = 0 %}
{% if section.settings.buy_1 != blank or section.settings.get_1 != blank or section.settings.add_1 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}
{% if section.settings.buy_2 != blank or section.settings.get_2 != blank or section.settings.add_2 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}
{% if section.settings.buy_3 != blank or section.settings.get_3 != blank or section.settings.add_3 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}

  .bundle-offer-block-{{ section.id }} {
    border: 1px solid {{ section.settings.border_color }};
    border-radius: {{ section.settings.border_radius }}px;
    padding: 20px;
    font-family: inherit;
    background-color: {{ section.settings.bg_color }};
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  .bundle-offer-block-{{ section.id }} .bundle-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  .bundle-offer-block-{{ section.id }} .bundle-column {
    flex: 1 1 0;
    max-width: {{ 100 | divided_by: bundle_count }}%;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
  }

  .bundle-offer-block-{{ section.id }} .main-text {
    font-weight: bold;
    color: {{ section.settings.main_text_color }};
  }

  .bundle-offer-block-{{ section.id }} .highlight {
    color: {{ section.settings.highlight_color }};
    font-weight: bold;
  }

  .bundle-offer-block-{{ section.id }} .small-text {
    font-size: 0.9em;
    margin-top: 5px;
    white-space: nowrap;
  }

  .bundle-offer-block-{{ section.id }} .footer-note {
    margin-top: 15px;
    font-size: 0.8em;
    color: {{ section.settings.main_text_color }};
  }

  @media screen and (max-width: 768px) {
    .bundle-offer-block-{{ section.id }} .bundle-column {
      flex: 1 1 0;
      max-width: {{ 100 | divided_by: bundle_count }}%;
    }

    .bundle-offer-block-{{ section.id }} .small-text {
      font-size: 0.8em;
    }
  }
{%- endstyle -%}

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %} content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="bundle-offer content-container color-{{ section.settings.color_scheme }} color-scheme-{{ section.id }} gradient{% if section.settings.full_width %} bundle-offer--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding"
    {% if section.settings.enable_section_border %} style="
    border: 1px solid;
    border-color: {{ section.settings.section_border_color }};
    border-radius: {{ section.settings.section_border_radius }}px;"
    {% endif %}
  >
    <div class="bundle-offer__wrapper bundle-offer__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
      <div class="bundle-offer__blocks {{ section.settings.content_alignment }} animate-item">
        <div class="bundle-offer-block-{{ section.id }}">
          <div class="bundle-row">
            {% if section.settings.buy_1 != blank or section.settings.get_1 != blank or section.settings.add_1 != blank %}
              <div class="bundle-column">
                <div class="main-text">{{ section.settings.buy_1 }}</div>
                <div class="highlight">{{ section.settings.get_1 }}</div>
                <div class="small-text">{{ section.settings.add_1 }}</div>
              </div>
            {% endif %}

            {% if section.settings.buy_2 != blank or section.settings.get_2 != blank or section.settings.add_2 != blank %}
              <div class="bundle-column">
                <div class="main-text">{{ section.settings.buy_2 }}</div>
                <div class="highlight">{{ section.settings.get_2 }}</div>
                <div class="small-text">{{ section.settings.add_2 }}</div>
              </div>
            {% endif %}

            {% if section.settings.buy_3 != blank or section.settings.get_3 != blank or section.settings.add_3 != blank %}
              <div class="bundle-column">
                <div class="main-text">{{ section.settings.buy_3 }}</div>
                <div class="highlight">{{ section.settings.get_3 }}</div>
                <div class="small-text">{{ section.settings.add_3 }}</div>
              </div>
            {% endif %}
          </div>

          <div class="footer-note">{{ section.settings.footer_note }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Buy more discounts",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "Full width"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "checkbox",
      "id": "enable_section_border",
      "label": "Enable section border",
      "default": false,
      "info": "Shows border color around section"
    },
    {
      "type": "color",
      "id": "section_border_color",
      "default": "#000000",
      "label": "Section border color"
    },
    {
      "type": "range",
      "id": "section_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Section border radius",
      "default": 4
    },
    {
      "type": "header",
      "content": "Bundle offer styling"
    },  
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border Color",
      "default": "#cccccc"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Border Radius (px)",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    },
    {
      "type": "color",
      "id": "main_text_color",
      "label": "Main Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "highlight_color",
      "label": "Highlight Text Color",
      "default": "#990000"
    },
    {
      "type": "header",
      "content": "Discount #1"
    }, 
    {
      "type": "text",
      "id": "buy_1",
      "label": "Buy Text",
      "default": "Buy 2"
    },
    {
      "type": "text",
      "id": "get_1",
      "label": "Get X Text",
      "default": "Get 1 Free"
    },
    {
      "type": "text",
      "id": "add_1",
      "label": "Add X to Cart Text (Optional)",
      "default": "(add X to cart)"
    },
    {
      "type": "header",
      "content": "Discount #2"
    },  
    {
      "type": "text",
      "id": "buy_2",
      "label": "Buy Text",
      "default": "Buy 3"
    },
    {
      "type": "text",
      "id": "get_2",
      "label": "Get X Text",
      "default": "Get 2 Free"
    },
    {
      "type": "text",
      "id": "add_2",
      "label": "Add X to Cart Text (Optional)",
      "default": "(add X to cart)"
    },
    {
      "type": "header",
      "content": "Discount #3"
    },  
    {
      "type": "text",
      "id": "buy_3",
      "label": "Buy Text",
      "default": "Buy 6"
    },
    {
      "type": "text",
      "id": "get_3",
      "label": "Get X Text",
      "default": "Get 3 Free"
    },
    {
      "type": "text",
      "id": "add_3",
      "label": "Add X to Cart Text (Optional)",
      "default": "(add X to cart)"
    },
    {
      "type": "header",
      "content": "Footer text"
    },  
    {
      "type": "text",
      "id": "footer_note",
      "label": "Footer Note (Optional)"
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 40
    }
  ],
  "presets": [
    {
      "name": "Buy more discounts",
      "category": "Product",
      "settings": {
        "buy_1": "Buy 2",
        "get_1": "Get 1 Free",
        "add_1": "(add 3 to cart)",
        "buy_2": "Buy 3",
        "get_2": "Get 2 Free",
        "add_2": "(add 5 to cart)",
        "buy_3": "Buy 6",
        "get_3": "Get 3 Free",
        "add_3": "(add 9 to cart)"
      }
    }
  ]
}
{% endschema %}