Fecha Envio - Liquid

<style>
  .custom-shipping-container {
    display: flex;
    padding: 6px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background-color: #f6f6f6;
    border-radius: 20px;
    margin-top: 10px; /* Agrega espacio en la parte superior */
  }

  .custom-shipping-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .text-block-shipping {
    font-size: 12px;
    color: #000;
  }

  .shipping-date {
    font-weight: bold;
  }

  .free-shipping {
    font-weight: bold;
  }

  .green-circle {
    animation: fade 1s ease-in-out infinite;
  }

  @keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    function addBusinessDays(startDate, daysToAdd) {
      let currentDate = new Date(startDate);
      let addedDays = 0;

      while (addedDays < daysToAdd) {
        currentDate.setDate(currentDate.getDate() + 1);
        let dayOfWeek = currentDate.getDay();
        if (dayOfWeek !== 0 && dayOfWeek !== 6) { // Excluye domingos (0) y sábados (6)
          addedDays++;
        }
      }
      return currentDate;
    }

    var daysAfterToday = 1; // Días hábiles después de hoy
    var today = new Date();
    var shipDate = addBusinessDays(today, daysAfterToday);

    // Días de la semana en español
    var daysOfWeek = ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];

    // Formato de fecha en español con el día completo
    var formattedDate = `${daysOfWeek[shipDate.getDay()]} ${shipDate.getDate()} de ${shipDate.toLocaleString('es-ES', { month: 'long' })}`;

    document.getElementById('shipping-date').textContent = formattedDate;
  });
</script>

<div class="custom-shipping-container">
  <div class="custom-shipping-item">
    <svg class="green-circle" xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
      <circle cx="6" cy="6.5" r="6" fill="#137333"/>
    </svg>
    <div class="text-block-shipping">Envío estimado para el <span id="shipping-date" class="shipping-date"></span></div>
  </div>
  <div class="custom-shipping-item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Flag_of_Chile.svg" loading="lazy" alt="Bandera de Chile" class="custom-icon" width="16" height="12">
    <div class="text-block-shipping"><span class="free-shipping">Envío GRATIS</span> a todo Chile</div>
  </div>
</div>