<template>
  <app-layout>

        <d-table :columns="columns" :row="bottle_entry" title="Bottle Entry">
            <template v-slot:action>
                <inertia-link :href="route('admin.bottle-entry.create')" class="btn bg-green-500 hover:bg-green-700 hover:shadow-md text-white"><i class="fal fa-plus mr-2"></i> Add New</inertia-link>
            </template>

            <template v-slot:tbody  >
                <tr v-for="(bottle, k) in bottle_entry.data" :key="k" class="text-sm">
                    <td>{{bottle.donor_id}}</td>
                    <td>{{bottle.number_bottles}}</td>
                    <td>{{(bottle.gross_wight - bottle.net_wight).toFixed(2)}}</td>
                    <td>{{bottle.net_wight.toFixed(2)}}</td>
                    <td>{{bottle.gross_wight.toFixed(2)}}</td>
                    <td>{{bottle.gross_balance.toFixed(2)}}</td>
                    <td>{{bottle.month_expression.long}}</td>
                    <td class="capitalize">
                        <i class="fas fa-circle  mr-2" :class="{
                            'text-red-500' : bottle.qc == 'Dispose' || bottle.qc == 'dispose',
                            'text-green-500' : bottle.qc == 'Clear' || bottle.qc == 'clear',
                            'text-red-600' : bottle.qc == 'Reuse' || bottle.qc == 'reuse' || bottle.qc == 'not cleared',
                        }"></i> {{bottle.qc}}
                    </td>
                    <td align="center" class="min-w-[200px]" >
                        <a :href="route('admin.print.barcode', [bottle.id+'-'+bottle.donor_id, 'Crate'])"  target="_blank" class="btn-round bg-orange-500 active:bg-yellow-500 hover:bg-yellow-500 shadow hover:shadow-lg">
                            <i class="fal fa-print text-white"></i>
                        </a>
                        <inertia-link :href="route('admin.bottle-entry.edit', bottle)" class="btn-round bg-blue-500 active:bg-blue-800 hover:bg-blue-800 shadow hover:shadow-lg">
                            <i class="fad fa-pencil-alt text-white"></i>
                        </inertia-link>
                        <inertia-link :href="route('admin.bottle-entry.destroy', bottle)" method="delete" as="button" type="button" onclick="return confirm('Are you sure?')" class="btn-round bg-red-500 active:bg-red-800 hover:bg-red-800 shadow hover:shadow-lg">
                            <i class="far fa-trash text-white"></i>
                        </inertia-link>

                    </td>
                </tr>
            </template>
        </d-table>

  </app-layout>
</template>


<script>
    import AppLayout from '@/Layouts/AppLayout.vue';
    import DTable from "@/components/Tables/Table.vue";

    export default {
        props:['bottle_entry'],

        components:{
            AppLayout,
            DTable
        },

        data(){
            return{
                columns:[
                    { field: "donor_id", lable: "Donor Id", sort: true},
                    { field: "number_bottles", lable: "Number of Bottles", sort: true},
                    { field: "bottle_wight", lable: "Bottle Weight (g)", sort: true},
                    { field: "net_wight", lable: "Net Weight (g)", sort: true},
                    { field: "gross_wight", lable: "Gross Weight (g)", sort: true},
                    { field: "gross_balance", lable: "Balance", sort: true},
                    { field: "month_expression", lable: "Month of Expression", sort: true},
                    { field: "qc", lable: "QC", sort: true},
                    { lable: "Action",  sort: false, align:'center'},
                ]
            }
        },
        mounted() {
            console.log(this.bottle_entry);
        },
    }
</script>
