<template>
    <div class="row justify-content-center" @keyup.enter="submitForm">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-b-10">
                        <div class="col">
                            <div class="row m-b-0 text-primary">
                                <div class="col">
                                    <label class="text-primary fs-11 all-caps">Select the delivery type</label>
                                </div>
                            </div>
                            <div class="row text-center justify-content-center">
                                <div class="col p-r-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': parameters.company_module_id === 'driver', 'b-grey': parameters.company_module_id !== 'driver'}"  @click="parameters.company_module_id = 'driver'">
                                        <div class="row m-b-15 justify-content-center">
                                            <div class="col-8">
                                                <img src="/images/guangzhou-map.png" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin" :class="{ 'text-primary': parameters.company_module_id === 'driver', 'semi-bold': parameters.company_module_id === 'driver'}">Driver</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-l-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': parameters.company_module_id === 'courierService', 'b-grey': parameters.company_module_id !== 'courierService' }"  @click="parameters.company_module_id = 'courierService'">
                                        <div class="row m-b-15 justify-content-center">
                                            <div class="col-8">
                                                <img src="/images/yiwu-map.png" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin" :class="{ 'text-primary': parameters.company_module_id === 'courierService', 'semi-bold': parameters.company_module_id === 'courierService'}">Courier Service</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row" v-show="parameters.company_module_id === 'courierService'">
                        <div class="col">
                           <div class="row m-b-10">
                               <div class="col">
                                    <div class="btn btn-xs btn-primary no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="courierService.status = !courierService.status">
                                        <div class="row">
                                            <div class="col p-t-10 p-b-10">
                                                {{courierService.name ? courierService.name : 'Please Select'}}
                                            </div>
                                            <div class="col-auto bg-primary-light">
                                                <div class="row h-100 align-items-center">
                                                    <div class="col">
                                                        <i class="fa" :class="[{'fa-angle-down': !courierService.status}, {'fa-angle-up': courierService.status}]"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="relative w-100">
                                        <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !courierService.status}]" style="top: 100%; right: 0; z-index: 1;">
                                            <div class="row text-left no-margin bg-white">
                                                <div class="col no-padding">
                                                    <div class="row no-margin" :class="[{'bg-primary-light': courierService.name === 'Pos Laju'}, {'text-white': courierService.name === 'Pos Laju'}, {'hover-primary': courierService.name !== 'Pos Laju'}]" @click="updateCourierService({name: 'Pos Laju', id: 'pos_laju'})">
                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                            <div class="row align-items-center justify-content-center">
                                                                <div class="col">
                                                                    <div class="font-heading fs-10">Pos Laju</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row no-margin" :class="[{'bg-primary-light': courierService.name === 'GD Express'}, {'text-white': courierService.name === 'GD Express'}, {'hover-primary': courierService.name !== 'GD Express'}]"  @click="updateCourierService({name: 'GD Express', id: 'gd_express'})">
                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                            <div class="row align-items-center justify-content-center">
                                                                <div class="col">
                                                                    <div class="font-heading fs-10">GD Express</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row no-margin" :class="[{'bg-primary-light': courierService.name === 'City-Link'}, {'text-white': courierService.name === 'City-Link'}, {'hover-primary': courierService.name !== 'City-Link'}]"  @click="updateCourierService({name: 'City-Link', id: 'city_link'})">
                                                        <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                            <div class="row align-items-center justify-content-center">
                                                                <div class="col">
                                                                    <div class="font-heading fs-10">City-Link Express</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                               </div>
                           </div>
                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_reference">
                                <label class="text-primary">Tracking Number</label>
                                <input type="text" class="form-control fs-12" v-model.trim="parameters.container_reference">
                            </validation-wrapper-component>
                        </div>
                    </div>

                    <div class="row" v-show="parameters.company_module_id === 'driver'">
                        <div class="col m-b-10">
                           <div class="btn btn-xs btn-primary no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="driver.status = !driver.status">
                                <div class="row">
                                    <div class="col p-t-10 p-b-10">
                                        {{driver.name ? driver.name : 'Please Select'}}
                                    </div>
                                    <div class="col-auto bg-primary-light">
                                        <div class="row h-100 align-items-center">
                                            <div class="col">
                                                <i class="fa" :class="[{'fa-angle-down': !driver.status}, {'fa-angle-up': driver.status}]"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="relative w-100">
                                <div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !driver.status}]" style="top: 100%; right: 0; z-index: 1;">
                                    <div class="row text-left no-margin bg-white">
                                        <div class="col no-padding">
                                            <div class="row no-margin" :class="[{'bg-primary-light': driver.name === 'Driver1'}, {'text-white': driver.name === 'Driver1'}, {'hover-primary': driver.name !== 'Driver1'}]" @click="updateDriver({name: 'Driver1', id: 'driver1'})">
                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col">
                                                            <div class="font-heading fs-10">Driver 1</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row no-margin" :class="[{'bg-primary-light': driver.name === 'Driver2'}, {'text-white': driver.name === 'Driver2'}, {'hover-primary': driver.name !== 'Driver2'}]"  @click="updateDriver({name: 'Driver2', id: 'driver2'})">
                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col">
                                                            <div class="font-heading fs-10">Driver 2</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row no-margin" :class="[{'bg-primary-light': driver.name === 'Driver 3'}, {'text-white': driver.name === 'Driver 3'}, {'hover-primary': driver.name !== 'Driver 3'}]"  @click="updateDriver({name: 'Driver 3', id: 'driver3'})">
                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="col">
                                                            <div class="font-heading fs-10">Driver 3</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>{{item.length}}</p>

                    <div class="row">
                        <div class="col-12 col-md-6 pr-md-1">
                            <validation-wrapper-component class="m-b-10" :validator="$v.parameters.etd">
                                <label class="text-primary">ETD</label>
                                <date-picker-component :parameters="parameters" :value="'etd'"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md-6 pl-md-1">
                            <validation-wrapper-component class="m-b-10" :validator="$v.parameters.eta">
                                <label class="text-primary">ETA</label>
                                <date-picker-component :parameters="parameters" :value="'eta'"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                    </div>

                    <div class="row m-t-15 align-items-center justify-content-end">
                        <div class="col-auto">
                            <div class="btn btn-default b-rad-none btn-lg" @click="$store.dispatch('toggleSection', {name: 'createDeliveryPackingListFormSection', status: false})">Cancel</div>
                            <div class="btn rounded btn-primary btn-lg" @click="submitForm">Submit</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import modalFormHandler from '../../../general/mixins/modalFormHandler';
    import { required } from "vuelidate/lib/validators";

    export default {
        data() {
            return {
                parameters: {
                    company_module_id: this.company_module_id,
                    packing_list_id: [160, 161],
                    etd: this.etd, 
                    eta: this.eta, 
                },
                courierService: {
                    name: '',
                    id: '',
                    status: false
                },
                driver: {
                    name: '',
                    id: '',
                    status: false
                },
            };
        },
        validations: {
            parameters: {
                etd: { required },
                eta: { required },
            }
        },
        methods: {
            updateCourierService(courierService){
                this.courierService = {
                    name: courierService.name,
                    id: courierService.id,
                    status: false,
                }
            },
            updateDriver(driver){
                this.driver = {
                    name: driver.name,
                    id: driver.id,
                    status: false,
                }
            },
            submitForm(){
                this.submit(this.route('api.packing_list.create.deliver'), 'post', this.section, true, true)
            },
        },
        mixins: [componentHandler, modalFormHandler]
    }

</script>