{%- if type == 'quick-view' -%}
  {%- assign quick_view = true -%}
{%- endif -%}

{%- liquid
  assign first_variant = product.variants | first
  assign selected_variant = product.selected_or_first_available_variant | default: first_variant
-%}

<div class="product-info row">
  <div class="col-12 col-lg-5 product-info_media">
    {%- render 'product-snippet', type:'media', quick_view: quick_view -%}
  </div>

  <div class="col-12 col-lg-7 product-info_details">
    <div class="product-info_title">
      {%- if section.settings.show_vendor -%}
        <a href="{{ product.vendor | url_for_vendor }}" class="product-details_vendor">{{ product.vendor }}</a>
      {%- endif -%}

      <h1 class="product-details_title">{{ product.title }}</h1>

      <div class="product-info_reviews">
        {%- render 'review', product: product, type: 'badge', write_review: true -%}
      </div>

      {%- if settings.show_social_sharing_product -%}
        {%- render 'product-snippet', type: 'social-sharing' -%}
      {%- endif -%}

      {%- if section.settings.show_sku -%}
        {%- render 'product-snippet', type: 'sku', selected_variant: selected_variant -%}
      {%- endif -%}

      {%- render 'product-snippet', type: 'inventory', selected_variant: selected_variant -%}
    </div>

    {%- if section.settings.show_short_des -%}
      {%- render 'product-snippet', type: 'short-description' -%}
    {%- endif -%}

    {%- if settings.enable_product_wishlist -%}
      {%- if section.settings.enable_notifications_subscribe != true or selected_variant.available -%}
        {%- assign show_notification_subcribe = false -%}
      {%- else -%}
        {%- assign show_notification_subcribe = true -%}
      {%- endif -%}
      
      <div class="product-wishlist-compare{% if show_notification_subcribe %} d-none{% endif %}">
        {%- if settings.enable_product_wishlist -%}
          <button class="st-wishlist-button" data-type="details" data-handle="{{ product.handle }}"></button>
        {%- endif -%}
      </div>
    {%- endif -%}

    <div class="product-details">
      <div class="product-details_price d-flex justify-content-between align-items-end">
        {% assign deadline = '2025-06-21T23:59:00+03:00' %}
        {% assign now = 'now' | date: "%s" %}
        {% assign deadline_unix = deadline | date: "%s" %}

        {% if collection and collection.handle == 'fathersday' and now < deadline_unix %}
          {% assign original_price = product.price %}
          {% assign discount = original_price | times: 0.20 %}
          {% assign discounted_price = original_price | minus: discount %}

          <span class="price--sale">
            <span class="price--original">{{ original_price | money }}</span>
            <span class="price--discounted">{{ discounted_price | money }}</span>
            <span class="price--percentage-off">Save 20%</span>
          </span>

          <div id="countdown-timer" style="font-size: 16px; font-weight: bold; color: red; margin-top: 8px;">
            ⏳ Offer ends in: <span id="timer-value">loading...</span>
          </div>

          <script>
            const end = new Date("2025-06-21T23:59:00+03:00").getTime();
            const timerSpan = document.getElementById("timer-value");

            function updateCountdown() {
              const now = new Date().getTime();
              const distance = end - now;

              if (distance <= 0) {
                clearInterval(countdown);
                timerSpan.innerHTML = "🚨 Offer expired!";
                return;
              }

              const days = Math.floor(distance / (1000 * 60 * 60 * 24));
              const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
              const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
              const seconds = Math.floor((distance % (1000 * 60)) / 1000);

              timerSpan.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
            }

            updateCountdown();
            const countdown = setInterval(updateCountdown, 1000);
          </script>

        {% else %}
          {%- render 'product-snippet', type: 'price', selected_variant: selected_variant -%}
        {% endif %}
      </div>

      {%- if section.settings.show_countdown_timer -%}
        {%- render 'product-snippet', type: 'product-countdown', selected_variant: selected_variant -%}
      {%- endif -%}

      {%- render 'product-snippet', type: 'form', selected_variant: selected_variant, section: section -%}

      {%- if settings.show_peple_in_cart -%}
        {%- render 'product-snippet', type: 'people-in-cart', selected_variant: selected_variant -%}
      {%- endif -%}

      {%- if settings.order_shipping_time -%}
        {%- render 'product-snippet', type: 'shipping', selected_variant: selected_variant -%}
      {%- endif -%}
    </div>
  </div>
</div>

<script type="application/json" data-settings>
  {
    "showInventory": {{ section.settings.show_inventory_quantity | json }},
    "inventoryThreshold": {{ section.settings.inventory_threshold | json }},
    "enableSubscribe": {{ section.settings.enable_notifications_subscribe | json }}
  }
</script>

{%- if type == 'quick-view' -%}
  <script type="application/json" data-product-json>
    {{ product | json }}
  </script>

  <script type="application/json" data-variants-inventory-json>
    {
      {%- for variant in product.variants -%}
        {%- unless forloop.first -%} ,{%- endunless -%}
        "{{ variant.id }}": {
          "inventory_policy" : {{ variant.inventory_policy | json }},
          "inventory_quantity" : {{ variant.inventory_quantity }}
        }
      {%- endfor -%}
    }
  </script>
{%- endif -%}
