<div class="h-screen bg-green-400">
    <section class="py-20 2xl:py-40 overflow-hidden bg-green-400">
        <div class="container px-4 mx-auto">
          <div class="max-w-5xl mx-auto">
            <div class="flex flex-wrap items-center -mx-10">
              <div class="w-full lg:w-1/2 px-10">
                <div class="px-6 lg:px-20 py-12 lg:py-24 bg-white shadow-2xl rounded-lg">
                    <div wire:id="0zd9hBxvEA5XqiPYKOLR" wire:initial-data="{&quot;fingerprint&quot;:{&quot;id&quot;:&quot;0zd9hBxvEA5XqiPYKOLR&quot;,&quot;name&quot;:&quot;verify-component&quot;,&quot;locale&quot;:&quot;en&quot;,&quot;path&quot;:&quot;verify-purchase-code&quot;,&quot;method&quot;:&quot;GET&quot;},&quot;effects&quot;:{&quot;listeners&quot;:[]},&quot;serverMemo&quot;:{&quot;children&quot;:[],&quot;errors&quot;:[],&quot;htmlHash&quot;:&quot;95ae35c6&quot;,&quot;data&quot;:{&quot;purchase_code&quot;:null,&quot;buy_username&quot;:null,&quot;verified&quot;:false},&quot;dataMeta&quot;:[],&quot;checksum&quot;:&quot;cdc1f9d5419506d4236e9763fc5d11aa96d9479607bbf425e1a1e733f30b9330&quot;}}">
        <form wire:submit.prevent="verifyPurchase">
        <h3 class="mb-10 text-2xl font-bold font-heading">Verify Purchase Code</h3>
        

            <div>
                
                <div class="flex items-center pl-6 border border-gray-300 bg-white rounded-full">
                    <span class="inline-block pr-3 border-r border-gray-50">
                        <svg class="w-5 h-5" width="17" height="21" viewbox="0 0 17 21" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.184 8.48899H15.2011V6.25596C15.2011 2.6897 12.3193 0 8.49924 0C4.67919 0 1.7974 2.6897 1.7974 6.25596V8.48899H1.81568C0.958023 9.76774 0.457031 11.3049 0.457031 12.9569C0.457031 17.3921 4.06482 21 8.49924 21C12.9341 21 16.5424 17.3922 16.5428 12.9569C16.5428 11.3049 16.0417 9.76774 15.184 8.48899ZM2.69098 6.25596C2.69098 3.14895 5.13312 0.893578 8.49924 0.893578C11.8654 0.893578 14.3075 3.14895 14.3075 6.25596V7.39905C12.8423 5.86897 10.7804 4.91468 8.49966 4.91468C6.21837 4.91468 4.15607 5.86946 2.69098 7.40017V6.25596ZM8.49966 20.1064C4.55762 20.1064 1.35061 16.8989 1.35061 12.9569C1.35061 9.01534 4.5572 5.80826 8.49924 5.80826C12.4422 5.80826 15.6488 9.01534 15.6492 12.9569C15.6492 16.8989 12.4426 20.1064 8.49966 20.1064Z"
                                fill="black"></path>
                            <path
                                d="M8.49957 8.93567C7.26775 8.93567 6.26562 9.93779 6.26562 11.1696C6.26562 11.8679 6.60247 12.5283 7.1592 12.9474V14.7439C7.1592 15.4829 7.76062 16.0843 8.49957 16.0843C9.2381 16.0843 9.83994 15.4829 9.83994 14.7439V12.9474C10.3966 12.5278 10.7335 11.8679 10.7335 11.1696C10.7335 9.93779 9.7309 8.93567 8.49957 8.93567ZM9.16793 12.3228C9.03032 12.4023 8.94636 12.5502 8.94636 12.7088V14.7439C8.94636 14.9906 8.74572 15.1907 8.49957 15.1907C8.25342 15.1907 8.05278 14.9906 8.05278 14.7439V12.7088C8.05278 12.5502 7.96833 12.4032 7.83072 12.3228C7.41026 12.078 7.1592 11.6468 7.1592 11.1696C7.1592 10.4307 7.76062 9.82925 8.49957 9.82925C9.2381 9.82925 9.83994 10.4307 9.83994 11.1696C9.83994 11.6468 9.58881 12.078 9.16793 12.3228Z"
                                fill="black"></path>
                        </svg>
                    </span>
                    <input
                        class="w-full pr-6 pl-4 py-4 font-bold placeholder-gray-400 rounded-r-full focus:outline-none"
                        type="text" placeholder="Purchase Code" wire:model='purchase_code'>
                </div>
                
                
                <div class="mt-3 flex items-center pl-6 border border-gray-300 bg-white rounded-full">
                    <span class="inline-block pr-3 border-r border-gray-50">
                        <svg class="w-5 h-5" width="20" height="21" viewbox="0 0 20 21" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M15.6243 13.5625C15.3939 13.5625 15.2077 13.7581 15.2077 14V16.4517C15.2077 18.2573 14.0443 20.125 12.0973 20.125H5.42975C3.56848 20.125 1.87435 18.3741 1.87435 16.4517V10.5H15.6243C15.8547 10.5 16.041 10.3044 16.041 10.0625C16.041 9.82058 15.8547 9.625 15.6243 9.625H15.2077V5.95175C15.2077 2.39183 12.8635 0 9.37435 0H7.70768C4.21855 0 1.87435 2.39183 1.87435 5.95175V9.625H1.45768C1.22728 9.625 1.04102 9.82058 1.04102 10.0625V16.4517C1.04102 18.8322 3.13268 21 5.42975 21H12.0972C14.3089 21 16.0409 19.0023 16.0409 16.4517V14C16.041 13.7581 15.8547 13.5625 15.6243 13.5625ZM2.70768 5.95175C2.70768 2.86783 4.67022 0.875 7.70768 0.875H9.37435C12.4119 0.875 14.3743 2.86783 14.3743 5.95175V9.625H2.70768V5.95175Z"
                                fill="black"></path>
                            <path
                                d="M18.8815 9.3711C18.7482 9.17377 18.4878 9.12827 18.3003 9.26701L8.58655 16.4919L6.75235 14.5655C6.58942 14.3944 6.32608 14.3944 6.16322 14.5655C6.00028 14.7366 6.00028 15.0131 6.16322 15.1842L8.24655 17.3717C8.32695 17.4561 8.43362 17.4999 8.54115 17.4999C8.62488 17.4999 8.70868 17.4732 8.78282 17.4194L18.7828 9.98185C18.9703 9.84143 19.0141 9.56843 18.8815 9.3711Z"
                                fill="black"></path>
                        </svg>
                    </span>
                    <input
                        class="w-full pr-6 pl-4 py-4 font-bold placeholder-gray-400 rounded-r-full focus:outline-none"
                        type="text" placeholder="Buyers Username" wire:model='buy_username'>
                </div>
                
            </div>


            <button
                class="mt-6 py-4 w-full bg-green-500 hover:bg-green-600 text-white font-bold rounded-full transition duration-200">Get
                started</button>

            </form>
    </div>
<!-- Livewire Component wire-end:0zd9hBxvEA5XqiPYKOLR -->                </div>
              </div>
              <div class="w-full lg:w-1/2 px-10 mb-16 lg:mb-0 order-first lg:order-last">
                <div class="max-w-md">
                  <span class="text-lg text-white font-bold">Verify Purchase Code</span>
                  <h2 class="mt-8 mb-12 text-5xl font-bold font-heading">Start using project by verifying your purchase</h2>
                  <p class="text-sm text-red-500 bg-white p-2 rounded-lg text-center">
                    Don't ever share your purchase code with anyone
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/storage/favicons/Zkdqlya3pEEzAB4WZbNyewrDP2g2el7i2iQY4S9d.png" />
    <title>Purchase code verification - SHALANKA - Digital Market Place</title>
    <link href="https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Tailwind -->
<link href="https://shalanka.com/public/css/app.css" rel="stylesheet">
<!-- Livewire Styles -->
<style >
    [wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid] {
        display: none;
    }

    [wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
        display:none;
    }

    [wire\:offline] {
        display: none;
    }

    [wire\:dirty]:not(textarea):not(input):not(select) {
        display: none;
    }

    input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
        animation-duration: 50000s;
        animation-name: livewireautofill;
    }

    @keyframes livewireautofill { from {} }
</style>
<link href="https://shalanka.com/public/css/easymde.min.css" rel="stylesheet">
<link href="https://shalanka.com/public/css/main.css" rel="stylesheet">
<style>
    [x-cloak] { display: none !important; }
    
    .focus\:shadow-outline-primary:focus {
        box-shadow: 0 0 0 3px hsla(178,40%,75%,0.45);
    }



            
    .bg-primary-50 {
        background-color: #f3ffff !important;
    }

    .focus\:border-primary-50:focus{
        border-color: #f3ffff !important;
    }
    .hover\:bg-primary-50:hover{
        background-color: #f3ffff !important;
    }

    .border-primary-50:focus {
        border-color: #f3ffff !important;
    }



    .text-primary-50 {
        color: #f3ffff !important;
    }

    .ring-primary-50 {
        color: #f3ffff !important;
    }

            
    .bg-primary-100 {
        background-color: #e7ffff !important;
    }

    .focus\:border-primary-100:focus{
        border-color: #e7ffff !important;
    }
    .hover\:bg-primary-100:hover{
        background-color: #e7ffff !important;
    }

    .border-primary-100:focus {
        border-color: #e7ffff !important;
    }



    .text-primary-100 {
        color: #e7ffff !important;
    }

    .ring-primary-100 {
        color: #e7ffff !important;
    }

            
    .bg-primary-200 {
        background-color: #c0ffff !important;
    }

    .focus\:border-primary-200:focus{
        border-color: #c0ffff !important;
    }
    .hover\:bg-primary-200:hover{
        background-color: #c0ffff !important;
    }

    .border-primary-200:focus {
        border-color: #c0ffff !important;
    }



    .text-primary-200 {
        color: #c0ffff !important;
    }

    .ring-primary-200 {
        color: #c0ffff !important;
    }

            
    .bg-primary-300 {
        background-color: #81d1ce !important;
    }

    .focus\:border-primary-300:focus{
        border-color: #81d1ce !important;
    }
    .hover\:bg-primary-300:hover{
        background-color: #81d1ce !important;
    }

    .border-primary-300:focus {
        border-color: #81d1ce !important;
    }



    .text-primary-300 {
        color: #81d1ce !important;
    }

    .ring-primary-300 {
        color: #81d1ce !important;
    }

            
    .bg-primary-400 {
        background-color: #41918e !important;
    }

    .focus\:border-primary-400:focus{
        border-color: #41918e !important;
    }
    .hover\:bg-primary-400:hover{
        background-color: #41918e !important;
    }

    .border-primary-400:focus {
        border-color: #41918e !important;
    }



    .text-primary-400 {
        color: #41918e !important;
    }

    .ring-primary-400 {
        color: #41918e !important;
    }

            
    .bg-primary-500 {
        background-color: #01514e !important;
    }

    .focus\:border-primary-500:focus{
        border-color: #01514e !important;
    }
    .hover\:bg-primary-500:hover{
        background-color: #01514e !important;
    }

    .border-primary-500:focus {
        border-color: #01514e !important;
    }



    .text-primary-500 {
        color: #01514e !important;
    }

    .ring-primary-500 {
        color: #01514e !important;
    }

            
    .bg-primary-600 {
        background-color: #013836 !important;
    }

    .focus\:border-primary-600:focus{
        border-color: #013836 !important;
    }
    .hover\:bg-primary-600:hover{
        background-color: #013836 !important;
    }

    .border-primary-600:focus {
        border-color: #013836 !important;
    }



    .text-primary-600 {
        color: #013836 !important;
    }

    .ring-primary-600 {
        color: #013836 !important;
    }

            
    .bg-primary-700 {
        background-color: #000505 !important;
    }

    .focus\:border-primary-700:focus{
        border-color: #000505 !important;
    }
    .hover\:bg-primary-700:hover{
        background-color: #000505 !important;
    }

    .border-primary-700:focus {
        border-color: #000505 !important;
    }



    .text-primary-700 {
        color: #000505 !important;
    }

    .ring-primary-700 {
        color: #000505 !important;
    }

            
    .bg-primary-800 {
        background-color: #000000 !important;
    }

    .focus\:border-primary-800:focus{
        border-color: #000000 !important;
    }
    .hover\:bg-primary-800:hover{
        background-color: #000000 !important;
    }

    .border-primary-800:focus {
        border-color: #000000 !important;
    }



    .text-primary-800 {
        color: #000000 !important;
    }

    .ring-primary-800 {
        color: #000000 !important;
    }

            
    .bg-primary-900 {
        background-color: #000000 !important;
    }

    .focus\:border-primary-900:focus{
        border-color: #000000 !important;
    }
    .hover\:bg-primary-900:hover{
        background-color: #000000 !important;
    }

    .border-primary-900:focus {
        border-color: #000000 !important;
    }



    .text-primary-900 {
        color: #000000 !important;
    }

    .ring-primary-900 {
        color: #000000 !important;
    }

    
</style>
    </head>

<body>
    
    
    
    <!-- Livewire Scripts -->

<script src="/livewire/livewire.js?id=21fa1dd78491a49255cd" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
<script data-turbo-eval="false" data-turbolinks-eval="false" >
    if (window.livewire) {
	    console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
	}

    window.livewire = new Livewire();
    window.livewire.devTools(true);
    window.Livewire = window.livewire;
    window.livewire_app_url = '';
    window.livewire_token = 'rhaahSw4lGid138ETE8PFmuW72HsxTqv28QQaLlg';

	/* Make sure Livewire loads first. */
	if (window.Alpine) {
	    /* Defer showing the warning so it doesn't get buried under downstream errors. */
	    document.addEventListener("DOMContentLoaded", function () {
	        setTimeout(function() {
	            console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
	        })
	    });
	}

	/* Make Alpine wait until Livewire is finished rendering to do its thing. */
    window.deferLoadingAlpine = function (callback) {
        window.addEventListener('livewire:load', function () {
            callback();
        });
    };

    let started = false;

    window.addEventListener('alpine:initializing', function () {
        if (! started) {
            window.livewire.start();

            started = true;
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
        if (! started) {
            window.livewire.start();

            started = true;
        }
    });
</script>
<script src="https://shalanka.com/vendor/livewire-charts/app.js"></script>
<script>

window.addEventListener('alert', event => {
    Swal.fire({
        title: event.detail.message ?? '',
        icon: event.detail.type ?? null,
        ...event.detail.options
    })
});

window.addEventListener('confirming', confirming => {
    window.addEventListener(confirming.detail, event => {
        Swal.fire({
            confirmButtonText: event.detail.options.confirmButtonText ?? 'Yes',
            ...event.detail.options
        }).then((result) => {
            if (result.isConfirmed) { Livewire.emit(event.detail.onConfirmed,event.detail.options["inputAttributes"]); }
            else { const cancelCallback = event.detail.onCancelled; if (!cancelCallback) { return; } Livewire.emit(cancelCallback) }
        })
    });
});
</script>


<script src="https://shalanka.com/public/js/app.js"></script>
<script src="https://shalanka.com/public/js/init-alpine.js"></script>
<script src="https://shalanka.com/public/js/easymde.min.js"></script>
<script src="https://shalanka.com/public/js/privacy.js"></script>
<script src="https://shalanka.com/public/js/main.js"></script>


<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.4/firebase-messaging.js"></script>

    <script>
        var firebaseConfig = {
            messagingSenderId: "466714270604",
        };



        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const messaging = firebase.messaging();
        initFirebaseMessagingRegistration();

        function initFirebaseMessagingRegistration() {
            messaging
                .requestPermission()
                .then(function() {
                    return messaging.getToken({
                        vapidKey: "BCI-5mJxyXylxyrsS4xW816hzNrP_il35BMSwkVcfappXM81chpwrtEm2yBuAGTEObfzDrxDxAktKw81NYz7c1g"
                    })
                })
                .then(function(token) {
                    console.log(token);
                    //
                    livewire.emit('changeFCMToken', token);

                }).catch(function(err) {
                    console.log('User Token Error' + err);
                });
        }


        messaging.onMessage(function(payload) {
            const noteTitle = payload.notification.title;
            const noteOptions = {
                body: payload.notification.body,
                icon: payload.notification.icon,
            };
            new Notification(noteTitle, noteOptions);
        });

    </script>
    </body>

</html>
