Shopify Countdown Timer Section

                    {%- comment -%}
=========================================
Shopify Countdown Timer Section
-----------------------------------------
Tech Stack: HTML, CSS, JavaScript (Vanilla)
Functionality:
- Displays a countdown timer for promotions or events
- Customizable through Shopify Theme Editor
- Accepts an end date in "dd/mm/yyyy hh:mm:ss" format
- Converts date format to work with JavaScript Date()
- Fully responsive with CSS flexbox
- Shows "Sale is Live!" when the timer reaches zero

Additional Notes:
- Can be used in promotional sections (e.g., sales, limited-time offers)
- For more pre-built templates, check http://prebuilttemplates.com/
=========================================
{%- endcomment -%}

<section class="countdown-timer-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="countdown-container page-width">
    <div class="countdown-text">
      <h2 style="color: {{ section.settings.text_color }};">{{ section.settings.heading }}</h2>
      <p style="color: {{ section.settings.text_color }};">{{ section.settings.description }}</p>
    </div>

    <!-- Convert the user-input date to a valid format -->
    {% assign end_date = section.settings.end_time | date: "%Y-%m-%d %H:%M:%S" %}
    
    <div class="countdown-timer" data-end-time="{{ end_date }}">
      <div class="time-box"><span id="days">00</span><small>Days</small></div>
      <div class="time-box"><span id="hours">00</span><small>Hours</small></div>
      <div class="time-box"><span id="minutes">00</span><small>Minutes</small></div>
      <div class="time-box"><span id="seconds">00</span><small>Seconds</small></div>
    </div>
  </div>
</section>

<style>
.countdown-timer-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.countdown-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.countdown-text {
  flex: 1;
  max-width: 50%;
  text-align: left;
}
.countdown-timer {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.time-box {
  background: rgba(0, 0, 0, 0.05);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  min-width: 70px;
}
.time-box span {
  font-size: 24px;
  font-weight: bold;
  display: block;
}
.time-box small {
  font-size: 14px;
}
@media (max-width: 768px) {
  .countdown-container {
    flex-direction: column;
    text-align: center;
  }
  .countdown-text, .countdown-timer {
    max-width: 100%;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  function startCountdown() {
    let endTimeString = document.querySelector(".countdown-timer").getAttribute("data-end-time");

    if (!endTimeString) return;

    // Convert end date to JavaScript format
    let countdownDate = new Date(endTimeString).getTime();

    function updateCountdown() {
      let now = new Date().getTime();
      let distance = countdownDate - now;

      if (distance < 0) {
        document.querySelector(".countdown-timer").innerHTML = "<h3>Sale is Live!</h3>";
        return;
      }

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

      document.getElementById("days").innerText = days < 10 ? "0" + days : days;
      document.getElementById("hours").innerText = hours < 10 ? "0" + hours : hours;
      document.getElementById("minutes").innerText = minutes < 10 ? "0" + minutes : minutes;
      document.getElementById("seconds").innerText = seconds < 10 ? "0" + seconds : seconds;
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
  }

  startCountdown();
});
</script>

{% schema %}
{
  "name": "Countdown Timer",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f9f4ee"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Eid-Festive Sale"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "Maecenas Tincidunt Ipsum Et Felis Pellentesque Volutpat. Phasellus Ligula Arcu Aliquam."
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "end_time",
      "label": "End Date and Time",
      "default": "30/05/2050 23:00:00",
      "info": "Format: dd/mm/yyyy hh:mm:ss"
    }
  ],
  "presets": [
    {
      "name": "Countdown Timer",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}