@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/panel.css')}}">

@endpush
<div class="
    @if($this->currentStepComputed > 2)
    col-sm-12
    @else
    col-sm-10
    @endif
    py-0 px-sm-0 pe-0 invitation {{ ($firstRegisterCouponBanner && $this->currentStepComputed <= 4) ? 'has-first-register-coupon' : '' }}">
    <style>
        .first-register-coupon-strip {
            position: sticky;
            top: 0;
            z-index: 40;
            background: #f84343;
            color: #fff;
            font-weight: 700;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .first-register-coupon-strip .coupon-text {
            font-size: 1.85rem;
            line-height: 1;
            letter-spacing: 0.02em;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
        }
        .first-register-coupon-strip .coupon-text-track {
            display: inline-flex;
            align-items: center;
            gap: 2.5rem;
            min-width: max-content;
            animation: coupon-marquee 16s linear infinite;
            will-change: transform;
        }
        @keyframes coupon-marquee {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        .first-register-coupon-strip .coupon-countdown {
            font-size: 1.85rem;
            line-height: 1;
            letter-spacing: 0.08em;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            flex-shrink: 0;
            background: #212121;
            padding: 6px 10px;
            border-radius: 9999px;
        }
        @media (min-width: 769px) {
            .first-register-coupon-strip {
                display: none !important;
            }
        }
        @media (max-width: 768px) {
            .first-register-coupon-strip {
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                z-index: 1040;
            }
            .invitation.has-first-register-coupon {
                padding-top: 44px !important;
            }
            .first-register-coupon-strip {
                padding: 8px 12px;
            }
            .first-register-coupon-strip .coupon-text,
            .first-register-coupon-strip .coupon-countdown {
                font-size: 1.05rem;
            }
            .first-register-coupon-strip {
                gap: 8px;
            }
        }
    </style>

    @if($firstRegisterCouponBanner && $this->currentStepComputed <= 4)
        @php
            $descuentoTexto = $firstRegisterCouponBanner['tipo_descuento'] === 'porcentaje'
                ? rtrim(rtrim(number_format($firstRegisterCouponBanner['valor_descuento'], 2, '.', ''), '0'), '.') . '%'
                : '$' . number_format($firstRegisterCouponBanner['valor_descuento'], 2);
            $textoBanner = $firstRegisterCouponBanner['texto_banner'] ?: ('Ahorrate en ' . $descuentoTexto . ' 🔥 🤙 Código: ' . $firstRegisterCouponBanner['codigo']);
        @endphp
        <div class="first-register-coupon-strip"
             x-data="{
                remaining: {{ (int) $firstRegisterCouponBanner['remaining_seconds'] }},
                timer: null,
                format() {
                    const total = Math.max(0, this.remaining);
                    const hours = Math.floor(total / 3600);
                    const minutes = Math.floor((total % 3600) / 60);
                    const seconds = total % 60;
                    const p = (n) => String(n).padStart(2, '0');
                    return `${p(hours)}:${p(minutes)}:${p(seconds)}`;
                },
                init() {
                    this.timer = setInterval(() => {
                        if (this.remaining <= 0) {
                            clearInterval(this.timer);
                            this.remaining = 0;
                            return;
                        }
                        this.remaining -= 1;
                    }, 1000);
                }
             }">
            <span class="coupon-text">
                <span class="coupon-text-track">
                    <span>{{ $textoBanner }}</span>
                    <span aria-hidden="true">{{ $textoBanner }}</span>
                </span>
            </span>
            <span class="coupon-countdown" x-text="format()"></span>
        </div>
    @endif

    <section>
        <div class="col-md-12">
            <div class="form-body">
                
                @foreach ($steps as $k => $stepView)
                    @if(intval($this->currentStepComputed) == intval($k))
                        @if($stepView)
                            @include("customer.{$stepView}")
                        @endif
                    @endif
                @endforeach
                
                @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="list-unstyled">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
        </div>
    </section>
</div>

<script>
    function unmountCardPaymentBrickController(){
        try {
            window.cardPaymentBrickController.unmount()
        } catch (err) {
            return
        }
    }

    window.onload = function() {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function(event) {
            unmountCardPaymentBrickController()
            history.pushState(null, null, document.URL);
        });
    };

    document.addEventListener('livewire:init', () => {
        Livewire.on('step-changed-scroll-top', () => {
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    window.scrollTo({ top: 0, behavior: 'auto' });
                });
            });
        });
    });
</script>