<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 msg = 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);
            msg.value = err.response.data.error;
            //alert(err.response.data.error);
        });
}
</script>

<template>

    <Head title="Free Cappuccino" />

    <div
        class="bg-orange-600 p-6 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-xl mx-auto p-6 lg:p-8 bg-white rounded-lg shadow-lg">
            <div class="flex flex-col items-center">

                <h3 class="text-center text-4xl">Enter your NIC number below to receive your complimentary cappuccino
                </h3>

                <template v-if="qrCode">
                    <div class="mx-auto p-5 border-4 rounded-lg">
                        <img class="mx-auto" :src="qrCode">
                    </div>
                </template>

                <template v-if="!qrCode">
                    <div>
                        <input type="text" placeholder="Enter your NIC" class="mt-3 rounded" v-model="nic" />
                        <button :disabled="!nic" :class="{ 'opacity-60 cursor-not-allowed': !nic }"
                            class="bg-orange-500 rounded px-4 py-2 ml-3" type="button"
                            @click="submitNic">Submit</button>
                        <p v-if="msg" class="text-red-500 mt-4">{{ msg }}</p>
                    </div>

                </template>
                <template v-else>
                    <div class="text-center">
                        <h5 class="mt-4 text-lg">Show the QR code below to the cashier to enjoy your free short cappuccino.</h5>

                        <h5 class="mt-4 text-lg">Valid only at: Barista Kandy City & Barista Kandy Diner Outlets
                            Validity: 24<sup>th</sup>–28<sup>th</sup> August</h5>

                        <h5 class="mt-4 text-lg">Valid for one-time use only.</h5>
                        <br>
                        <a class="text-blue-400 underline" href="https://barista.lk">Home</a>
                    </div>
                </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>
