<script >
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head, useForm } from '@inertiajs/inertia-vue3';
import { ref } from '@vue/reactivity';
import axios from 'axios';

const props = defineProps({
    events: Object
});

const numOfWinners = 6;

// const form = useForm({
//     place: null,
//     player_number: null,
//     talent: null
// })

const form = useForm({
    event_id: null,
    winners: []
})


const selectedEvent = ref(null);
const selectedEventObj = ref(null);

function onSelectEvent() {
    console.log(this.selectedEvent);
}

function getPlayerData() {
    console.log(form.player_number);
    axios.post('players/player_by_number', { number: form.player_number }).then(res => {
        console.log(res);
    })
}


</script>

<template>

    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">


                        <select v-model="selectedEvent" id="school_id"
                            class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                            <option v-bind:value="null">Select Event</option>
                            <option v-for="(event, index) in props.events" v-bind:key="index" :value="event.id"
                                :change="onSelectEvent()">{{
                                        event.name + ' - ' + event.type
                                }}
                            </option>
                        </select>

                        <div v-if="selectedEventObj">
                            <h2 class="text-2xl">Winners of {{ selectedEventObj.name + ' - ' + selectedEventObj.type }}
                            </h2>
                        </div>


                        <form @submit.prevent="submit" enctype="multipart/form-data">

                            <input type="text" v-model="selectedEvent" name="event_id" />

                            <table>
                                <thead>
                                    <tr>
                                        <th>ස්ථානය</th>
                                        <th>තරග අංකය</th>
                                        <th>නම</th>
                                        <th>දක්ෂතාවය</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="index in numOfWinners" :key="index">
                                        <td>
                                            <input v-model="form.winners[index].place" id="form_place"
                                                class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                        </td>
                                        <!-- <td>
                                            <input v-model="form.player_number[index]" id="form_place"
                                                v-on:focusout="getPlayerData()"
                                                class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                        </td>
                                        <td></td>
                                        <td>
                                            <input v-model="form.talent[index]" id="form_place"
                                                class="block p-2 mb-6 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                        </td> -->
                                    </tr>
                                </tbody>
                            </table>

                            <div class="mb-6">

                            </div>
                            <!-- <div class="flex items-start mb-6">
                                <div>
                                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                        for="user_avatar">Upload file</label>
                                    <input
                                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                                        aria-describedby="user_avatar_help" id="user_avatar" type="file"
                                        @input="form.file = $event.target.files[0]">
                                    <div class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="user_avatar_help">
                                        Application Excel</div>
                                </div>
                            </div> -->

                            <button type="submit" :disabled="form.processing"
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
                        </form>



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