@extends('layouts.app')
@section('title', 'Stripe Payment Success')
@section('idname', 'single')
@section('content')

<div class="container" style="margin-top: 200px;margin-bottom: 100px;">
    <div class="row justify-content-center">
        <div class="col-8">
               <style>
        body {
            background-color: #f8f9fa;
        }

        .container {
            margin-top: 50px;
            text-align: center;
        }

        .success-wrapper {
            display: inline-block;
            position: relative;
        }

        .success-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background-color: #28a745;
            border-radius: 50%;
            margin-bottom: 20px;
            animation: scaleAndFade 1s ease-out forwards;
        }

        .success-tick {
            font-size: 2em;
            color: #fff;
        }

        .success-message {
            font-size: 1.5em;
            color: #28a745;
            margin-top: 20px;
            animation: fadeIn 1s ease-out forwards;
        }

        @keyframes scaleAndFade {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>

    <div class="success-wrapper">
            <div class="success-circle">
                <div class="success-tick">&#10003;</div>
            </div>
        </div>
        <div class="success-message">  {!! @$success !!}</div>

        @if(isset($confirmation))
            <div class="alert alert-info" role="alert">
                {{ $confirmation }}
            </div>
        @endif
    </div>
        </div>
    </div>
</div>

@endsection