<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import axios from 'axios';
import { ref } from 'vue';

const props = defineProps<{

}>();

const nic = ref(null);
const qrCode = ref(null);

const submitNic = () => {
    axios.post(route('storeNic'), { nic: nic.value })
        .then(res => {
            console.log(res);
            if (res.data && res.status == 200) {
                qrCode.value = res.data.qrCode;
                nic.value = null;
            }

        }).catch(err => {
            console.log(err);
            alert(err.response.data.error);
        });
}
</script>

<template>
    <Head title="Welcome" />

    <div
        class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
        <div class="max-w-7xl mx-auto p-6 lg:p-8">
            <div class="flex-col align-middle">

                <img src="/images/barista-offer.jpg" class="mx-auto" alt="Barista Logo" width="200" height="200" />

                <h3 class="text-center text-4xl">Claim your discount</h3>
                
                
                <template v-if="qrCode">
                    <img class="mx-auto" :src="qrCode">
                </template>

                <p>
                    Enter your NIC number to generate a QR code and claim 50% off at Kandy Barista Outlet.                    
                </p>

                <template v-if="!qrCode">
                    <input type="text" class="mt-3" v-model="nic" />
                    <button :disabled="!nic" class="border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" type="button" @click="submitNic">Submit</button>
                </template>
                <template v-else>
                    <h5 class="mt-4">Take a screenshot of this QR code and claim 50% off at any Barista Outlet</h5>
                    <br>
                    <a href="https://barista.lk">Home</a>
                </template>
            </div>

        </div>
    </div>
</template>

<style>
h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

/* .bg-dots-darker {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .dark\:bg-dots-lighter {
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
    }
} */
</style>
