{% extends 'base.html' %} {% load static %} {% block content %}
<!-- Start Banner Carousel -->
{% if web.banner_status %}
<section class="has-carousel container">
  <div id="carousel" class="is-clipped">
    {% if web.photo_1 or web.photo_2 or web.photo_3 or web.photo_4 or web.photo_5 or web.photo_6 %}
      {% if web.photo_1 %}
      <a class="item-1" {% if web.photo_1link %}href="{{ web.photo_1link }}" target="blank"{% endif %} >
        <img src="{{ web.photo_1.url }}" alt="" />
      </a>
      {% endif %} 
      {% if web.photo_2 %}
      <a class="item-2" {% if web.photo_2link %}href="{{ web.photo_2link }}" target="blank" {% endif %} >
        <img src="{{ web.photo_2.url }}" alt="" />
      </a>
      {% endif %}
      {% if web.photo_3 %}
      <a class="item-3" {% if web.photo_3link %}href="{{ web.photo_3link }}" target="blank" {% endif %} >
        <img src="{{ web.photo_3.url }}" alt="" />
      </a>
      {% endif %}
      {% if web.photo_4 %}
      <a class="item-4" {% if web.photo_4link %}href="{{ web.photo_4link }}" target="blank" {% endif %} >
        <img src="{{ web.photo_4.url }}" alt="" />
      </a>
      {% endif %}
      {% if web.photo_5 %}
      <a class="item-5" {% if web.photo_5link %}href="{{ web.photo_5link }}" target="blank" {% endif %} >
        <img src="{{ web.photo_5.url }}" alt="" />
      </a>
      {% endif %}
      {% if web.photo_6 %}
      <a class="item-6" {% if web.photo_6link %}href="{{ web.photo_6link }}" target="blank" {% endif %} >
        <img src="{{ web.photo_6.url }}" alt="" />
      </a>
      {% endif %}
    {% else %}
    <div class="item-1">
      <img src="{% static 'img/banner.png' %}" alt="" />
    </div>
    {% endif %}
  </div>
</section>
{% endif %}
<!-- End Banner Carousel -->
<section id="homepage" class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-one-quarter is-hidden-mobile">
        {% include 'base/aside.html' %}
      </div>
      <div class="column">
        <div class="pagelist">
          <h3 class="title is-4">最新消息</h3>
          {% for page in page_list %}
          <a
            class="columns is-mobile"
            href="{% url 'pages:detail' pk=page.id %}"
          >
            <div class="column">{{ page.title }}</div>
            <div class="column is-narrow">{{ page.date|date:'Y/m/d'}}</div>
          </a>
          {% if not forloop.last %}
          <hr class="divider" />
          {% endif %} {% endfor %}
        </div>
        <div class="productlist">
          <h3 class="title is-4">熱門商品</h3>
          <div class="columns is-mobile is-multiline">
            {% for product in hit_products %}
            <div class="column is-half-mobile is-one-quarter-fullhd">
            <a href="{% url 'products:detail' cat=product.product_cat.id pk=product.id %}"
              class="product">
              <div class="product_img {% if not product.has_inventory %}list_sold_out{% endif %}">
              {% if product.photo %}<img src="{{ product.photo.url }}" alt="" /> {% else %}<img src="{% static 'img/demo.png'%}" alt="" />{% endif %}
              </div>
              <p>{{ product.name }}</p>
              </a>
              {% comment %} {% if not product.has_inventory %}<span class="sold_out">售完</span>{% endif %} {% endcomment %}
              <div class="columns is-vcentered is-mobile">
                <div class="column">
                  {% if product.sprice %}
                  <div class="price s_price">{{ product.sprice }}</div>
                  <div class="price cross_price">{{ product.price }}</div>
                  {% else %}
                  <div class="price s_price">{{ product.price }}</div>
                  {% endif %}
                </div>
                <div class="column is-narrow">
                {% if product.has_inventory %}
                  <form action="{% url 'carts:update' %}" method="post">
                    {% csrf_token %}
                    <input
                      type="hidden"
                      name="product_id"
                      value="{{ product.id }}"
                    />
                    <input
                      type="hidden"
                      name="path"
                      value="{{ request.path_info }}"
                    />
                    {% if product.productcoloroption_set.all %}
                    <div class="nostyle" onclick="modal('{{ product.id }}')">
                      <span class="icon">
                      <i class="fas fa-plus-circle fa-2x product_add"></i>
                      </span>
                    </div>
                    {% else %}
                    <button class="nostyle" type="submit">
                      <span class="icon">
                      <i class="fas fa-plus-circle fa-2x product_add"></i>
                      </span>
                    </button>
                    {% endif %}
                    <!-- Modal for color/size -->
                    <div class="modal" id="{{ product.id }}_modal">
                      <div class="modal-background" onclick="modal('{{ product.id }}')"></div>
                      <div class="modal-card">
                        {% comment %} <form method="POST" id="delivery_method"> {% endcomment %}
                          {% csrf_token %}
                          <header class="modal-card-head">
                            <p class="modal-card-title">{{ product.name }}</p>
                            <div class="delete" aria-label="close" onclick="modal('{{ product.id }}')"></div>
                          </header>
                          <section class="modal-card-body">
                            <div class="columns is-vcentered is-mobile">
                            <!-- color options -->
                            {% if product.productcoloroption_set.all %}
                              <div class="column">
                              <label class="label">{{ web.option1 }}</label>
                              <select name="color" class="select is-fullwidth" onchange="updateSizes({{ product.id }},this)" required>
                                <option value=""></option>
                                {% for color_option in product.productcoloroption_set.all %}
                                <option value="{{ color_option.color.pk }}">{{ color_option.color }}</option>
                                {% endfor %}
                              </select>
                              </div>
                            {% endif %}
                            <!-- Size options -->
                            {% if product.productcoloroption_set.first.available_sizes.all %}
                              <div class="column">
                              <label class="label">{{ web.option2 }}</label>
                              <select name="size" class="select is-fullwidth" data-product-id="{{ product.id }}" required>
                              </select>
                              </div>
                            {% endif %}
                            </div>
                          </section>
                          <footer class="modal-card-foot">
                            <input class="button is-success" value="確認" name="delivery_btn" type="submit" />
                          </footer>
                      </div>
                    </div>
                  </form>
                {% endif %}
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


{% endblock %} {% block js_extension %}
<!-- Banner Carousel -->
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
<script>
  // Banner Carousel
  bulmaCarousel.attach("#carousel", {
    slidesToScroll: 1,
    breakpoints: [
      { changePoint: 480, slidesToShow: 1, slidesToScroll: 1 },
      { changePoint: 640, slidesToShow: 1, slidesToScroll: 1 },
      { changePoint: 768, slidesToShow: 1, slidesToScroll: 1 }
    ],
    loop: true,
    autoplay: {{ web.banner_autoplay|yesno:"true,false" }},
    autoplaySpeed: {{ web.banner_autoplay_speed|default:3000 }},
  });
  // Color Size
  let color = document.getElementById('color');
  let size = document.getElementById('size');
  const productColorOptions = JSON.parse(JSON.stringify({{ product_color_options|safe }}));

  function updateSizes(product, selectColor) {
    var selectedColorId = selectColor.value; //顏色值
    var sizeSelect = document.querySelector('[data-product-id="' + product + '"]');
    var sizes = productColorOptions[product][selectedColorId];
    sizeSelect.innerHTML = '';
    for (var i = 0; i < sizes.length; i++) {
      var option = document.createElement('option');
      option.value = sizes[i].id;
      option.text = sizes[i].size;
      sizeSelect.appendChild(option);
    }
    // 清空尺寸选择框
    sizeSelect.value = '';
  }
  // Modal
  function modal(md) {
    $("#" + md +"_modal").toggleClass("is-active");
  }
</script>

{% endblock %}