<template>
    <div class="mx-5 text-right w-full mb-1">
        <a class="text-blue-400 text-sm hover:text-blue-500" :href="route('admin.milk-type.index')" target="_blank"><i class="fad fa-fill-drip mr-2"></i>Add Milk Type</a>
        <span class="mx-4 text-gray-500">|</span>
        <a class="text-blue-400 text-sm hover:text-blue-500" :href="route('admin.test-types.index')" target="_blank"><i class="fad fa-vials mr-2"></i>Add Test Type</a>
        <span class="mx-4 text-gray-500">|</span>
        <a class="text-blue-400 text-sm hover:text-blue-500" :href="route('admin.production-period.index')" target="_blank"><i class="fab fa-buffer mr-2"></i>Add Production Period</a>
    </div>
    <div
        class="responsive-table border-[1px] w-full rounded-md p-4 bg-green-50 border-green-200 mb-4 mx-4"
    >
        <div class="overflow-x-auto scroll-thin-visible">
            <table class="borderd-table bg-white min-w-full">
                <tr>
                    <th rowspan="3" class="border-r">Name of the test</th>
                    <th v-for="(period, p) in attributes.production_periods" :key="p">{{ period.name }}</th>
                </tr>


                <tr>
                    <td v-for="(item, i) in attributes.production_periods" :key="i" >
                        <select class="w-full border-0 bg-gray-200 px-[5px]" @change="milkTypePost(item.id, $event.target.value)">
                            <option disabled selected>Milk Type</option>
                            <option
                                :value="milkType.id"
                                v-for="(milkType, m) in attributes.milk_types"
                                :key="m"
                                :selected="checkMilkSeleted(item.id, milkType.id)"
                            >{{ milkType.name }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="border-r bg-gray-300" v-for="(item, i) in attributes.production_periods" :key="i">
                        <input type="date"  @change="storedate(item.id,  $event.target.value)"  :value="setTestDate(item.id)" class="border-0 w-full py-0 px-[5px] text-sm bg-transparent  h-[25px]">
                    </td>
                </tr>

                <tr v-for="(testType, index) in attributes.test_types" :key="index">
                    <th>{{ testType.name }}</th>
                    <td v-for="(item, i) in attributes.production_periods" :key="i">

                        <input type="number" @wheel="$event.target.blur()" @change="storeTestvalue(item.id, testType.id, $event.target.value)" :value="setTestValue(item.id, testType.id)" id="" class="border-0 w-full">
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import Select from '../Form/Select.vue';
    export default {
    components: { Select },
        props:['attributes', 'testResult', 'spin', 'production'],

        data(){
            return{
                report : this.testResult
            }
        },

        methods: {
            //  init values -------------------------------
            // select milk tpe
            checkMilkSeleted(productionId,milkTypeId){
                let response = false;

                this.report.forEach(element => {
                    if(element.production_period_id == productionId && milkTypeId == element.milk_type_id)
                        response = true;
                });

                return response;
            },

            // set selected date
            setTestDate(productionId){
                let response = null;

                this.report.forEach(element => {
                    if(element.production_period_id == productionId)
                        response = element.date;
                });
                return response;
            },

            // set test values
            setTestValue(productionId, testId){
                let response = null;

                this.report.forEach(element => {
                    if(element.production_period_id == productionId){
                        element.values.forEach(val => {
                            if(val.test_type_id == testId) response = val.value;
                        });
                    }
                });

                return response;
            },

            // save values --------------------------------
            // save milk type
            milkTypePost(productionId, milkTypeId){
                this.$emit("update:spin", true);
                axios.post(route('admin.production.test.store'),{
                    period: productionId,
                    production: this.production,
                    milkType: milkTypeId
                })
                .then(res => {
                    this.$emit("update:spin", false);
                    this.report = res.data.data;
                })
                .catch(err => {
                    alert('Something went wrong please try again')
                    this.$emit("update:spin", false);
                })
            },

            // save test values
            storeTestvalue(productionId, testId, val){
                this.$emit("update:spin", true);
                let vthis = this;
                axios.post(route('admin.production.test.value.store'),{
                    period      : productionId,
                    production  : vthis.production,
                    value       : val,
                    testId      : testId,
                    milkType    : vthis.attributes.milk_types[0].id
                })
                .then(res => {
                    vthis.report = res.data.data
                    this.setTestValue(productionId, testId);
                    vthis.$emit("update:spin", false);
                })
                .catch(err => {
                    alert('Something went wrong please try again')
                    vthis.$emit("update:spin", false);
                })
            },

            storedate(productionId, date){
                this.$emit("update:spin", true);
                axios.post(route('admin.production.test.date.store'),{
                    period: productionId,
                    production: this.production,
                    date: date
                })
                .then(res => {
                    this.$emit("update:spin", false);
                    this.report = res.data.data;
                })
                .catch(err => {
                    alert('Something went wrong please try again')
                    this.$emit("update:spin", false);
                })
            }

        },
    };
</script>

<style scoped>
    .borderd-table th:first-child {
        border-radius: 6px 0 0 0;
        -moz-border-radius: 6px 0 0 0;
        -webkit-border-radius: 6px 0 0 0;
    }

    .borderd-table th:last-child {
        border-radius: 0 6px 0 0;
        -moz-border-radius: 0 6px 0 0;
        -webkit-border-radius: 0 6px 0 0;
    }

    .borderd-table td:first-child,
    .borderd-table th:first-child {
        border-left: medium none;
    }

    .borderd-table th {
        background-color: #dce9f9;
        background-image: -moz-linear-gradient(center top, #f8f8f8, #ececec);
        background-image: -webkit-gradient(
            linear,
            0 0,
            0 bottom,
            from(#f8f8f8),
            to(#ececec),
            color-stop(0.4, #f8f8f8)
        );
        border-top: medium none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        font-size: 14px;
        font-weight: 600;
        padding: 10px;
        min-width: 150px
    }

    .borderd-table td,
    .borderd-table th {
        border-left: 1px solid #66d998;
        border-top: 1px solid #66d998;
        text-align: left;
        font-size: 14px;
    }
    .border-r {
        border-right: 1px solid #66d998;
    }
    .borderd-table {
        border: 1px solid #66d998;
        border-radius: 6px 6px 6px 6px;
        -moz-border-radius: 6px 6px 6px 6px;
        -webkit-border-radius: 6px 6px 6px 6px;
        box-shadow: 0 1px 1px #cccccc;
    }

    .scroll-thin-visible{
        scrollbar-width: thin;
    }

    .borderd-table td input:focus{
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }
</style>
