@extends('layouts.app')

@section('title', 'Pago rechazado')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.36/fancybox/fancybox.min.css" integrity="sha512-s4DOVHc73MjMnsueMjvJSnYucSU3E7WF0UVGRQFd/QDzeAx0D0BNuAX9fbZSLkrYW7V2Ly0/BKHSER04bCJgtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="{{asset('/css/panel.css')}}">
        <style>
            /* Hide the left sidebar when showing this page and make content centered */
            .sidebar {
                display: none !important;
            }

            /* Make the main column full-width and center its contents */
            .col-sm-10 {
                -webkit-box-flex: 0 !important;
                -ms-flex: 0 0 100% !important;
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }

            /* Center the container content vertically/horizontally */
            .start .container {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 60vh;
            }
        </style>
@endpush

@section('content')
<section>
    <div class="container text-center">
        <div class="textos">
            <h2 class="fs-sm-48 fw-800 fs-32 text-danger">Pago rechazado</h2>
            <p class="fs-sm-28 fw-600 fs-24 text-muted">No pudo procesarse tu pago. Intenta nuevamente o prueba con otra tarjeta.</p>

                <div class="mt-4">
                    <a href="#" onclick="goToStep3(event)" class="btn text-uppercase bg-primary rounded-pill text-white px-5 fw-600 py-2 fs-sm-18 fs-16">Volver</a>
                </div>
        </div>
    </div>
</section>

    <script>
        function goToStep3(e) {
            e.preventDefault();

            // Try to extract an invitation id from the current URL (e.g. /invitations/123/...)
            const match = window.location.pathname.match(/\/invitations\/(\d+)/);
            if (match && match[1]) {
                const invitationId = match[1];
                // Navigate to the edit page and add an anchor indicating step 3
                window.location.href = `/invitations/${invitationId}/edit#step03`;
                return;
            }

            // If no invitation id, try to go back two steps (common if user came from the wizard)
            try {
                if (window.history.length > 2) {
                    window.history.go(-2);
                } else {
                    window.history.back();
                }
            } catch (err) {
                window.history.back();
            }
        }
    </script>

@endsection