@extends('layouts.dashboardnew')

@section('content')

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card border-0 shadow-sm text-center p-4" style="border-radius: 24px;">
                
                @if($espera == 1)
                   
                    <div class="mb-4">
                        <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 90px; height: 90px;">
                            <i class="bi bi-check-lg display-4"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold">¡Compra Exitosa!</h3>
                    <p class="text-muted">Tu pago ha sido confirmado. Ya puedes disfrutar de tu compra.</p>
                    <div class="justify-content-center mt-4">
                        <a href="{{ route('personalorders') }}" class="btn btn-outline-success rounded-pill shadow-sm w-50">Ver mis compras</a>
                    </div>

                @elseif($espera == 0)
                    
                    <div class="mb-4">
                        <div class="bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 90px; height: 90px;">
                            <i class="bi bi-hourglass-split" style="font-size: 2.5rem;"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold">Recibimos tu comprobante</h3>
                    <p class="text-muted">No es necesario que esperes aquí. Te avisaremos cuando la validación termine.</p>
                    <div class="justify-content-center mt-4">
                        <a href="{{ route('tienda-index') }}" class="btn btn-outline-warning rounded-pill shadow-sm w-50">Seguir comprando</a>
                    </div>
                
                @elseif($espera == 2)
                    
                    <div class="mb-4">
                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 90px; height: 90px;">
                            <i class="bi bi-exclamation-triangle display-4"></i>
                        </div>
                    </div>
                    <h3 class="fw-bold">Pago Rechazado</h3>
                    <p class="text-muted text-balance">Lo sentimos tu compra no fue aprobada.</p>
                    <div class="justify-content-center mt-4">
                        <a href="{{ route('tienda-index') }}" class="btn btn-outline-danger rounded-pill shadow-sm w-50">Seguir comprando</a>
                    </div>

                @endif

                <div class="mt-4 pt-3 border-top">
                    <p class="small text-muted mb-0">Si tienes dudas, crea un <a href="{{ route('ticket') }}" class="text-decoration-none fw-bold">Ticket/Soporte</a></p>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection