{% set current_theme = current_theme() %} {% from "macros/form_errors.j2" import render_field_errors, render_form_errors %}

<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ title }}</title>

        {{ current_theme.local_style() }}
    </head>

    <body>
        {{ current_theme.navbar() }}

        <main>
            <form method="post">
                <div class="container">
                    <div class="py-5 text-center">
                        <h1 class="h2">
                            {{ _('Esta a punto de inscribirse al curso') }} {{ curso.codigo | upper}} - {{ curso.nombre | upper
                            }}
                        </h1>
                        {{ form.csrf_token }} {{ render_form_errors(form) }}
                        <p class="lead">{{ _('Complete la siguiente información para completar su registro.') }}</p>
                    </div>
                    <div class="row g-5">
                        <div class="col-md-5 col-lg-4 order-md-last">
                            <h4 class="d-flex justify-content-between align-items-center mb-3">
                                <span class="text-primary">{{ _('Resumen') }}</span>
                            </h4>
                            <ul class="list-group mb-3">
                                <li class="list-group-item d-flex justify-content-between lh-sm">
                                    <div>
                                        <h6 class="my-0">{{ _('Curso') }}</h6>
                                        <small class="text-body-secondary">{{ curso.nombre }}</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex justify-content-between lh-sm">
                                    <div>
                                        <h6 class="my-0">{{ _('Descripción') }}</h6>
                                        <small class="text-body-secondary">{{ curso.descripcion_corta }}</small>
                                    </div>
                                </li>
                                {% if curso.pagado %} {% if applied_coupon %}
                                <li class="list-group-item d-flex justify-content-between lh-sm">
                                    <div>
                                        <h6 class="my-0">{{ _('Precio Original') }}</h6>
                                        <small class="text-body-secondary">{{ original_price | round(2) }}</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex justify-content-between lh-sm text-success">
                                    <div>
                                        <h6 class="my-0">{{ _('Descuento') }} ({{ applied_coupon.code }})</h6>
                                        <small class="text-body-secondary">
                                            {% if applied_coupon.discount_type == 'percentage' %} {{
                                            applied_coupon.discount_value }}% {{ _('descuento') }} {% else %} {{ _('Descuento
                                            fijo') }} {% endif %}
                                        </small>
                                    </div>
                                    <span>-{{ discount_amount | round(2) }}</span>
                                </li>
                                {% else %}
                                <li class="list-group-item d-flex justify-content-between lh-sm">
                                    <div>
                                        <h6 class="my-0">{{ _('Precio') }}</h6>
                                        <small class="text-body-secondary">{{ curso.precio | round(2) }}</small>
                                    </div>
                                </li>
                                {% endif %}
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>{{ _('Total') }} (USD)</span>
                                    <strong>{{ final_price | round(2) }}</strong>
                                    {% if final_price == 0 %}
                                    <span class="badge bg-success ms-2">{{ _('¡GRATIS!') }}</span>
                                    {% endif %} {% else %}
                                </li>

                                <li class="list-group-item d-flex justify-content-between">
                                    <span>{{ _('Total') }}</span>
                                    <strong>{{ _('GRATIS') }}</strong>
                                    {% endif %}
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-7 col-lg-8">
                            <h4 class="mb-3">{{ _('Billing address') }}</h4>
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label for="nombre" class="form-label">{{ _('Nombre') }}</label>
                                    {{ form.nombre(class="form-control", id="nombre") }} {{ render_field_errors(form.nombre)
                                    }}
                                    <div class="invalid-feedback">{{ _('Valid first name is required.') }}</div>
                                </div>
                                <div class="col-sm-6">
                                    <label for="apellido" class="form-label">{{ _('Apellido') }}</label>
                                    {{ form.apellido(class="form-control", id="apellido") }} {{
                                    render_field_errors(form.apellido) }}
                                    <div class="invalid-feedback">{{ _('Valid last name is required.') }}</div>
                                </div>
                                <div class="col-12">
                                    <label for="correo_electronico" class="form-label">{{ _('Correo Electronico') }}</label>
                                    {{ form.correo_electronico(class="form-control", id="correo_electronico") }} {{
                                    render_field_errors(form.correo_electronico) }}
                                    <div class="invalid-feedback">
                                        {{ _('Please enter a valid email address for shipping updates.') }}
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="dirrecion1" class="form-label">{{ _('Dirección') }}</label>
                                    {{ form.direccion1(class="form-control", id="dirrecion1") }} {{
                                    render_field_errors(form.direccion1) }}
                                    <div class="invalid-feedback">{{ _('Please enter your shipping address.') }}</div>
                                </div>
                                <div class="col-12">
                                    <label for="direccion2" class="form-label">{{ _('Dirección 2') }}</label>
                                    {{ form.direccion2(class="form-control", id="direccion2") }} {{
                                    render_field_errors(form.direccion2) }}
                                </div>
                                <div class="col-md-5">
                                    <label for="pais" class="form-label">{{ _('País') }}</label>
                                    {{ form.pais(class="form-select", id="pais") }} {{ render_field_errors(form.pais) }}
                                    <div class="invalid-feedback">{{ _('Please select a valid country.') }}</div>
                                </div>
                                <div class="col-md-4">
                                    <label for="provincia" class="form-label">{{ _('Estado') }}</label>
                                    {{ form.provincia(class="form-control", id="provincia") }} {{
                                    render_field_errors(form.provincia) }}
                                    <div class="invalid-feedback">{{ _('Please provide a valid state.') }}</div>
                                </div>
                                <div class="col-md-3">
                                    <label for="codigo_postal" class="form-label">{{ _('Código Postal') }}</label>
                                    {{ form.codigo_postal(class="form-control", id="codigo_postal") }} {{
                                    render_field_errors(form.codigo_postal) }}
                                    <div class="invalid-feedback">{{ _('Zip code required.') }}</div>
                                </div>
                            </div>

                            {% if curso.pagado %}
                            <hr class="my-4" />
                            <h4 class="mb-3">{{ _('Código de Cupón') }}</h4>
                            <div class="row g-3">
                                <div class="col-12">
                                    {{ coupon_form.csrf_token }}
                                    <label for="coupon_code" class="form-label">{{ _('Código de Cupón (Opcional)') }}</label>
                                    <div class="input-group">
                                        {{ coupon_form.coupon_code(class="form-control", id="coupon_code") }}
                                        <button class="btn btn-outline-secondary" type="button" onclick="applyCoupon()">
                                            {{ _('Aplicar') }}
                                        </button>
                                    </div>
                                    {% if applied_coupon %}
                                    <small class="text-success"
                                        >✓ {{ _('Cupón') }} {{ applied_coupon.code }} {{ _('aplicado exitosamente') }}</small
                                    >
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            <br />
                            {% if curso.pagado %} {% if curso.auditable %}
                            <button class="w-100 btn btn-warning mb-2" name="modo" value="audit" type="submit">
                                {{ _('Auditar contenido del curso') }}
                            </button>
                            <p class="small text-muted">
                                {{ _('Puede acceder al contenido del curso pero no podrá resolver las evaluaciones u obtener un
                                certificado al finalizar.') }}
                                <br />
                                {{ _('Puede pagar el valor del curso antes de finalizarlo y acceder a las evaluaciones y la
                                certificación.') }}
                            </p>
                            <br />
                            {% endif %} {% if final_price == 0 %}
                            <button class="w-100 btn btn-success" name="modo" value="free" type="submit">
                                {{ _('¡Inscribirse Gratis con Cupón!') }}
                            </button>
                            {% else %}
                            <button class="w-100 btn btn-primary" name="modo" value="paid" type="submit">
                                {{ _('Proceder al pago') }} ({{ final_price | round(2) }} USD)
                            </button>
                            {% endif %} {% else %}
                            <button class="w-100 btn btn-primary" name="modo" value="free" type="submit">
                                {{ _('Inscribirse al curso') }}
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <!-- Hidden field to pass coupon code to backend -->
                <input
                    type="hidden"
                    name="coupon_code"
                    id="hidden_coupon_code"
                    value="{{ coupon_form.coupon_code.data or '' }}"
                />
            </form>
        </main>

        <script>
            function applyCoupon() {
                const couponCode = document.getElementById("coupon_code").value
                if (couponCode.trim()) {
                    // Update hidden field
                    document.getElementById("hidden_coupon_code").value = couponCode
                    // Redirect with coupon code in URL
                    const currentUrl = new URL(window.location)
                    currentUrl.searchParams.set("coupon_code", couponCode)
                    window.location.href = currentUrl.toString()
                }
            }

            // Handle Enter key in coupon input
            document.getElementById("coupon_code").addEventListener("keypress", function (e) {
                if (e.key === "Enter") {
                    e.preventDefault()
                    applyCoupon()
                }
            })
        </script>
    </body>
</html>
