@extends('layouts.dashboard')

@section('title', 'Columbus 17 | Dashboard')

@section('content')
    <div class="p-10 w-10/12 m-auto flex flex-col space-y-12">
        <Modal border='border-x-4 border-blue-900 rounded-md'>
            <template v-slot:header>
                <div class="flex flex-col">
                    <img class="w-1/2 h-[77px] object-cover self-center" src="{{asset('storage/logo.png')}}"/>
                </div>
            </template>
            <template v-slot:body>
                <div class="mt-12 flex flex-col space-y-12 items-center">
                    <div class="bg-sky-200 rounded-full h-48 w-48 relative">
                        <i class="fa fa-check absolute left-[35px] top-[25px] text-blue-900" style="font-size:128px" aria-hidden="true"></i>
                    </div>
                    <p class="text-blue-900 text-xl text-center w-1/2">We received your purchase and placed your subscription in our system, now you will be redirecting your dashboard<i class="ml-2 fa fa-spinner animate-spin" aria-hidden="true"></i></p>
                </div>
            </template>
        </Modal>
    </div>
@endsection
<script>
    setTimeout(() => {
        window.location = "{{ route('dashboard') }}";
    },5000);
</script>