{% doc %}
  @prompt
    Un calculateur d'économies réalisées en automatique entre le prix et le prix avant réduction sur le produit parent 
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% liquid
  assign current_price = product.price
  assign compare_price = product.compare_at_price
  assign savings_amount = 0
  assign savings_percent = 0
  assign has_savings = false

  if compare_price and compare_price > current_price
    assign has_savings = true
    assign savings_amount = compare_price | minus: current_price
    assign savings_percent = savings_amount | times: 100.0 | divided_by: compare_price | round
  endif
%}

{% style %}
  .ai-savings-calculator-{{ ai_gen_id }} {
    display: block;
    width: {{ block.settings.desktop_width_percent }}%;
    max-width: 100%;
    padding: {{ block.settings.padding }}px;
    background-color: {{ block.settings.background_color }};
    border-radius: {{ block.settings.border_radius }}px;
    text-align: {{ block.settings.text_alignment }};
  }

  .ai-savings-calculator__content-{{ ai_gen_id }} {
    display: flex;
    flex-direction: column;
    gap: {{ block.settings.spacing }}px;
  }

  .ai-savings-calculator__label-{{ ai_gen_id }} {
    font-size: {{ block.settings.label_size }}px;
    color: {{ block.settings.label_color }};
    margin: 0;
  }

  .ai-savings-calculator__amount-{{ ai_gen_id }} {
    font-size: {{ block.settings.amount_size }}px;
    font-weight: 700;
    color: {{ block.settings.amount_color }};
    margin: 0;
  }

  .ai-savings-calculator__percent-{{ ai_gen_id }} {
    font-size: {{ block.settings.percent_size }}px;
    color: {{ block.settings.percent_color }};
    margin: 0;
  }

  .ai-savings-calculator__empty-{{ ai_gen_id }} {
    font-size: {{ block.settings.label_size }}px;
    color: {{ block.settings.label_color }};
    opacity: 0.6;
    font-style: italic;
  }

  @media screen and (max-width: 749px) {
    .ai-savings-calculator-{{ ai_gen_id }} {
      width: 100%;
    }
  }
{% endstyle %}

<div class="ai-savings-calculator-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
  <div class="ai-savings-calculator__content-{{ ai_gen_id }}">
    {% if has_savings %}
      {% if block.settings.show_label %}
        <p class="ai-savings-calculator__label-{{ ai_gen_id }}">
          {{ block.settings.label_text }}
        </p>
      {% endif %}

      {% if block.settings.show_amount %}
        <p class="ai-savings-calculator__amount-{{ ai_gen_id }}">
          {{ savings_amount | money }}
        </p>
      {% endif %}

      {% if block.settings.show_percent %}
        <p class="ai-savings-calculator__percent-{{ ai_gen_id }}">
          ({{ savings_percent }}%)
        </p>
      {% endif %}
    {% else %}
      <p class="ai-savings-calculator__empty-{{ ai_gen_id }}">
        {{ block.settings.no_savings_text }}
      </p>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Calculateur d'économies",
  "settings": [
    {
      "type": "header",
      "content": "Contenu"
    },
    {
      "type": "checkbox",
      "id": "show_label",
      "label": "Afficher le libellé",
      "default": true
    },
    {
      "type": "text",
      "id": "label_text",
      "label": "Texte du libellé",
      "default": "Vous économisez"
    },
    {
      "type": "checkbox",
      "id": "show_amount",
      "label": "Afficher le montant",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_percent",
      "label": "Afficher le pourcentage",
      "default": true
    },
    {
      "type": "text",
      "id": "no_savings_text",
      "label": "Texte sans réduction",
      "default": "Aucune réduction disponible"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Largeur bureau",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Alignement du texte",
      "options": [
        {
          "value": "left",
          "label": "Gauche"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Droite"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "padding",
      "label": "Espacement interne",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px",
      "default": 20
    },
    {
      "type": "range",
      "id": "spacing",
      "label": "Espacement entre éléments",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Arrondi des coins",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 10
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Couleur de fond",
      "default": "#96ac53"
    },
    {
      "type": "header",
      "content": "Typographie"
    },
    {
      "type": "range",
      "id": "label_size",
      "label": "Taille du libellé",
      "min": 10,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "color",
      "id": "label_color",
      "label": "Couleur du libellé",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "amount_size",
      "label": "Taille du montant",
      "min": 14,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 24
    },
    {
      "type": "color",
      "id": "amount_color",
      "label": "Couleur du montant",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "percent_size",
      "label": "Taille du pourcentage",
      "min": 10,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "color",
      "id": "percent_color",
      "label": "Couleur du pourcentage",
      "default": "#ffffff"
    }
  ],
  "presets": [
    {
      "name": "Calculateur d'économies"
    }
  ]
}
{% endschema %}
