<template>
    <div class="row parentContainer m-b-15">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row align-items-center p-t-5 p-b-5">
                        <div class="col">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <p class="no-margin all-caps fs-10 light">Reference</p>
                                    <p class="no-margin bold">{{data.reference ? data.reference : 'n/a'}}</p>
                                </div>
                                <div class="col">
                                    <p class="no-margin all-caps fs-10 light">Arrival Date</p>
                                    <p class="no-margin bold">{{data.transport ? data.transport.drop_date : 'n/a'}}</p>
                                </div>
                                <div class="col-auto hide" v-if="$store.getters.isSuperAdmin">
                                    <button type="button" class="btn b-rad-none btn-danger fs-11 requestModal" data-type="deletePackingList"><i class="fa fa-times text-white fs-12"></i></button>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePackingList">
                                        <delete-packinglist-form-component :data="data"></delete-packinglist-form-component>
                                    </modal-component>
                                    <button type="button" class="btn b-rad-none btn-primary fs-11 requestModal" data-type="claimPackingList">Claim</button>
                                </div>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <p class="no-margin all-caps fs-10 light">Tracking Reference</p>
                                    <p class="no-margin bold">{{data.transport ? data.transport.tracking_number : 'n/a'}}</p>
                                </div>
                                <div class="col-auto">
                                    <p class="no-margin all-caps fs-10 light">Description</p>
                                    <p class="no-margin bold">{{data.packages ? data.packages[0].description: 'n/a'}}</p>
                                </div>
                            </div>
                            <div class="row" v-if="$store.getters.isSuperAdmin">
                                <div class="col-auto">
                                    <button type="button" class="btn btn-sm b-rad-none btn-outline-danger fs-11 requestModal" data-type="deletePackingList"><i class="fa fa-times"></i></button>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deletePackingList">
                                        <div class="row">
                                            <div class="col">
                                                <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
                                                <div class="row justify-content-center" v-show="!isLoading">
                                                    <div class="col">
                                                        <div class="row m-b-20">
                                                            <div class="col">
                                                                <h3 class="all-caps">Are you sure you want to delete this packing list?</h3>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col p-r-5">
                                                                <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
                                                            </div>
                                                            <div class="col p-l-5">
                                                                <div class="btn btn-sm btn-danger btn-block b-rad-none" data-dismiss="modal" @click="submit(route('api.packing_list.delete', item.id), 'delete', 'unclaimedPackingListSection', true, true)">Confirm</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </modal-component>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-sm btn-block b-rad-none btn-success fs-11 requestModal" data-type="claimPackingList">Claim</button>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="claimPackingList">
                                        <claim-packinglist-form-component :data="data.id"></claim-packinglist-form-component>
                                    </modal-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        mixins: [componentHandler]
    }
</script>
