{{-- PHP --}}
@php $cache = \App\Models\Setting::getByCache(); @endphp
{{-- HTML --}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" />
    <script defer src="{{ asset('js/scripts.js') }}"></script>
    <link href="https://fonts.googleapis.com/css2?family=Exo&display=swap" rel="stylesheet">
    <title>Canceled</title>
</head>

<body class="font-[Exo]">
    <div class="loader-container fixed h-screen w-screen flex justify-center items-center bg-white z-[100]">
        <div class="w-24 h-24 rounded-full animate-spin border-4 border-blue-500 border-t-transparent"></div>
    </div>
    <div class="bg-cover py-32 bg-[#c7c7c7] min-h-screen max-h-full">
        <div class="bg-white w-1/2 mx-auto py-24 rounded-lg shadow-lg">
            <div class="w-full text-center">
                <img alt="checked" class="mx-auto w-24 h-24"
                    src="https://icon-library.com/images/failed-icon/failed-icon-7.jpg" />
                <p class="font-extrabold text-3xl text-[#ed1b2e]">Payment canceled</p>
            </div>
            <div class="w-full px-20 pt-12 mx-auto text-center">
                <p>We're sorry,</p>
                <p>The transaction has been canceled or an error occurred during processing.</p>
                <p>Please wait and try again or contact us for direct support.</p>
            </div>
            <div class="text-center h-8 mt-16">
                <a href="{{ url('/') }}"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 rounded">Home</a>
                <a href="{{ route('history-payment.index') }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 rounded">History</a>
            </div>

            <div class="text-center pt-4 italic text-blue-500">
                <a href="#" class="text-xs hover:underline">Term of Service</a>
            </div>
        </div>
        <div class="text-center py-8 text-xs text-[#656565]">
            <p>{{ $cache->value('license') }}</p>
            <p>{{ 'E-mail: ' . $cache->value('email') }}</p>
            <p>{{ 'Hotline: ' . $cache->value('phone') }}</p>
        </div>
    </div>

</html>
