@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>
            /* Ocultar sidebar */
            #panel-sidebar,
            .col-left {
                display: none !important;
            }

            /* Contenido ocupa todo el ancho */
            .col-lg-10 {
                flex: 0 0 100% !important;
                max-width: 100% !important;
                width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /* Fondo fijo con background-attachment */
            .image-bg {
                background-attachment: fixed !important;
                background-size: auto 40% !important;
                background-position: bottom center !important;
                background-repeat: no-repeat !important;
                min-height: 100vh;
                margin: 0 !important;
            }

            /* Centrar verticalmente el contenido */
            .col-lg-10 {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: 100vh;
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }

            /* Sección ocupa todo el espacio */
            section {
                width: 100%;
            }
        </style>
@endpush

@section('content')
<section>
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <!-- Icono de error -->
                <div class="mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-x-circle text-danger" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </div>

                <!-- Título del error -->
                <h2 class="fs-sm-48 fw-800 fs-32 text-danger mb-3">
                    {{ $error_info['title'] ?? 'Pago rechazado' }}
                </h2>

                <!-- Mensaje del error -->
                <p class="fs-sm-24 fw-600 fs-20 text-dark mb-2">
                    {{ $error_info['message'] ?? 'No pudo procesarse tu pago.' }}
                </p>

                <!-- Acción recomendada -->
                <p class="fs-sm-18 fs-16 text-muted mb-4">
                    {{ $error_info['action'] ?? 'Intenta nuevamente o prueba con otra tarjeta.' }}
                </p>

                <!-- Información técnica (colapsable) -->
                @if($error_code || $status_detail !== 'unknown')
                <div class="mb-4">
                    <button class="btn btn-link text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#technicalDetails" aria-expanded="false">
                        <small>Ver detalles técnicos</small>
                    </button>
                    <div class="collapse" id="technicalDetails">
                        <div class="card card-body bg-light text-start">
                            @if($error_code)
                                <p class="mb-1"><small><strong>Código:</strong> {{ $error_code }}</small></p>
                            @endif
                            @if($status_detail && $status_detail !== 'unknown')
                                <p class="mb-1"><small><strong>Detalle:</strong> {{ $status_detail }}</small></p>
                            @endif
                            @if($error_description)
                                <p class="mb-0"><small><strong>Descripción:</strong> {{ $error_description }}</small></p>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <!-- Botones de acción -->
                <div class="mt-4 d-flex flex-column flex-sm-row gap-3 justify-content-center">
                    @if(($error_info['can_retry'] ?? true) && $plan_id && $invitation_type_id && $template_id)
                        <!-- Botón para volver a intentar -->
                        <a href="{{ url('/home?plan_id=' . $plan_id . '&invitation_type_id=' . $invitation_type_id . '&template_id=' . $template_id) }}" 
                           class="btn btn-primary rounded-pill px-5 fw-600 py-2 fs-sm-18 fs-16">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-clockwise me-2" viewBox="0 0 16 16" style="vertical-align: text-bottom;">
                                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                            </svg>
                            Volver a intentar
                        </a>
                    @endif
                    
                    <!-- Botón para volver -->
                    <a href="#" onclick="goBack(event)" class="btn btn-outline-secondary rounded-pill px-5 fw-600 py-2 fs-sm-18 fs-16">
                        Volver
                    </a>
                </div>

                <!-- Mensaje de ayuda adicional -->
                <div class="mt-5 p-3 bg-light rounded">
                    <p class="mb-0 text-muted">
                        <small>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle me-1" viewBox="0 0 16 16">
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                            Si el problema persiste, te recomendamos contactar a tu banco o probar con otro método de pago.
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

    <script>
        function goBack(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