@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">
    <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);
        });
    };
</script>