{{-- 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>Successful</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://cdn-icons-png.flaticon.com/512/6276/6276686.png" />
                <p class="font-extrabold text-3xl text-[#88c941]">Payment successful</p>
            </div>
            <div class="flex justify-between w-full px-20 pt-12 mx-auto">
                <div class="font-bold">
                    <p class="my-1 text-[#656565]">Email</p>
                    <p class="my-1 text-[#656565]">Payment type</p>
                    <p class="my-1 text-[#656565]">Product</p>
                    <p class="my-1 text-[#656565]">Quantity</p>
                    <p class="my-1 text-[#656565]">Discount</p>
                    <p class="py-4 font-bold text-xl">Amount paid</p>
                    <p class="my-1 text-[#656565]">Transaction id</p>
                </div>
                <div class="text-right">
                    <p class="my-1 text-[#656565]">{{ $client->email }}</p>
                    <p class="my-1 text-[#656565]">{{ $order->payment_type }}</p>
                    <p class="my-1 text-[#656565]">{{ $package->title }}</p>
                    <p class="my-1 text-[#656565]">1</p>
                    <p class="my-1 text-[#656565] italic">
                        -${{ view_price(((float) $package->price) - ((float) $order->total_price)) }}</p>
                    <p class="py-4 font-bold text-xl">${{ view_price((float) $order->total_price) }}</p>
                    <p class="my-1 text-[#656565]">{{ $order->payment_id }}</p>
                </div>
            </div>
            <div class="text-right px-20 py-4 italic text-blue-500">
                <a href="#" class="text-xs hover:underline">Term of Service</a>
            </div>
            <div class="text-center h-8">
                <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>
        <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>
