<?php
$product = wc_get_product(get_the_ID());
if (
    !$product ||
    !$product->is_type('simple') ||
    !has_term('academy', 'product_cat', $product->get_id())
) {
    return;
}

$repeater = get_field('course_date', $product->get_id());
if (!$repeater || !is_array($repeater)) return;

$hoy_timestamp = strtotime(date('Y-m-d')); // Hoy
?>

<form class="cart" method="post" enctype="multipart/form-data">
    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>">

    <div class="product-dates-wrapper">
        <p><strong><i class="fa fa-calendar"></i> Fechas disponibles</strong></p>
        <div class="product-dates-options">
            <?php
            foreach ($repeater as $item) {
                $fecha_raw = trim($item['event_date'] ?? '');
                $hora_raw  = trim(strtolower($item['event_hour'] ?? '12:00 am'));

                // Formato fecha y hora
                $fecha = DateTime::createFromFormat('d/m/Y', $fecha_raw);
                $hora  = DateTime::createFromFormat('g:i a', $hora_raw);

                if ($fecha && $hora) {
                    $fecha->setTime((int)$hora->format('H'), (int)$hora->format('i'));
                    $timestamp = $fecha->getTimestamp();

                    if ($timestamp >= $hoy_timestamp) {
                        $fecha_valor = $fecha->format('Y-m-d H:i:s');
                        $formato     = date_i18n('j F, g:i A', $timestamp); // Ej: 24 Julio, 3:00 PM
                        ?>
                        <label class="date-option">
                            <input type="radio" name="selected_date" value="<?php echo esc_attr($fecha_valor); ?>">
                            <span><?php echo esc_html($formato); ?></span>
                        </label>
                        <?php
                    }
                }
            }
            ?>
        </div>
    </div>

    <button type="submit" class="single_add_to_cart_button button alt">Añadir al carrito</button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const radios = document.querySelectorAll('input[name="selected_date"]');
    let selected = null;

    radios.forEach(radio => {
        radio.addEventListener('click', function () {
            if (selected === this) {
                this.checked = false;
                selected = null;
            } else {
                selected = this;
            }
        });
    });
});
</script>

/* CONTENEDOR GENERAL DE FECHAS */
.product-dates-wrapper {
  background-color: #f4efe6;
  padding: 2rem;
  border-radius: 1rem;
  margin-top: 2rem;
  text-align: center;
}

/* TÍTULO DE FECHAS */
.product-dates-wrapper p {
  font-size: var(--txt-m);
  font-weight: 600;
  color: #4e3c2b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ÍCONO CALENDARIO */
.product-dates-wrapper p i {
  font-size: 20px;
  color: #6f563c;
}

/* GRID DE OPCIONES DE FECHA */
.product-dates-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* RADIO OCULTO */
.product-dates-options input[type="radio"] {
  display: none;
}

/* BOTONES DE FECHAS COMO PASTILLAS */
.product-dates-options .date-option span {
  text-transform: capitalize;
  text-align: center;
  padding: 0.3em 1em;
  border: none;
  border-radius: 50vh;
  color: var(--bricks-color-dsgjpa);
  background-color: #ffffff;
  box-shadow:
    rgba(0, 0, 0, 0.15) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.15) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: var(--txt-m);
  transition: all 0.2s ease-in-out;
}

/* ESTILO SELECCIONADO */
.product-dates-options input[type="radio"]:checked + span {
  background-color: #564b3e;
  color: #ffffff;
}

/* HOVER */
.product-dates-options .date-option span:hover {
  background-color: #f7f2eb;
}

/* ✅ BOTÓN PERSONALIZADO COMO EL DE BRICKS */
.single_add_to_cart_button {
  background-color: #564b3e !important;
  color: #ffffff !important;
  font-family: 'Maven Pro', sans-serif;
  font-weight: 600;
  font-size: var(--txt-m);
  line-height: 2.5em;
  border: none;
  border-radius: 50vh;
  padding: 0.3em 1.5em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  margin-top: 1.5rem;
}

.product-dates-wrapper .single_add_to_cart_button:hover {
  background-color: #37302a !important;
}

/* ✅ ÍCONO DE CARRITO IONIC */
.product-dates-wrapper .single_add_to_cart_button::after {
  content: "🛒";
  font-size: var(--txt-l);
  color: #ffffff;
}