<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col p-r-5">
                    <div class="row m-b-20">
                        <div class="col-12 col-md-7">
                            <a :href="route('orders.pending')" target="_blank">
                                <button class="btn btn-success btn-xs">Export Pending Orders</button>
                            </a>
                            <div class="row m-b-15">
                                <div class="col">
                                    <div class="row m-b-5">
                                        <div class="col p-r-0">
                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
                                                <div class="row">
                                                    <div class="col p-t-5 p-b-5 fs-9">
                                                        {{selectedSupplier.name}} - {{selectedSupplier.reference}}
                                                    </div>
                                                    <div class="col-auto b-l b-success">
                                                        <div class="row h-100 align-items-center">
                                                            <div class="col">
                                                                <i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.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': !selectedSupplier.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" v-for="supplier in suppliers"  v-bind:key="supplier.id" :data="supplier">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">{{supplier.name}} - {{supplier.reference}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col p-r-0">
                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="serviceDropdownLaunch.status = ! serviceDropdownLaunch.status">
                                                <div class="row">
                                                    <div class="col p-t-5 p-b-5">
                                                        {{selectedService.name}}
                                                    </div>
                                                    <div class="col-auto b-l b-primary">
                                                        <div class="row h-100 align-items-center">
                                                            <div class="col">
                                                                <i class="fa" :class="[{'fa-angle-down': !serviceDropdownLaunch.status}, {'fa-angle-up': serviceDropdownLaunch.status}]"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="relative w-100">
                                                <div class="absolute w-100 b-l b-b b-r b-success" v-show="serviceDropdownLaunch.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" v-for="service in selectedSupplier.services" v-bind:key="service.id" :data="service">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedService.id === service.id}, {'text-white': selectedService.id === service.id}, {'hover-primary': selectedService.id !== service.id}, {'pointer': selectedService.id !== service.id}]" @click="updateService(service)">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">{{service.name}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col p-r-0">
                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="currencyDropdownLaunch.status = ! currencyDropdownLaunch.status">
                                                <div class="row">
                                                    <div class="col p-t-5 p-b-5">
                                                        {{selectedCurrency.short_code}}
                                                    </div>
                                                    <div class="col-auto b-l b-primary">
                                                        <div class="row h-100 align-items-center">
                                                            <div class="col">
                                                                <i class="fa" :class="[{'fa-angle-down': !currencyDropdownLaunch.status}, {'fa-angle-up': currencyDropdownLaunch.status}]"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="relative w-100">
                                                <div class="absolute w-100 b-l b-b b-r b-success" v-show="currencyDropdownLaunch.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" v-for="currency in selectedSupplier.currencies"  v-bind:key="currency.id" :data="currency">
                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedCurrency.id === currency.id}, {'text-white': selectedCurrency.id === currency.id}, {'hover-primary': selectedCurrency.id !== currency.id}, {'pointer': selectedCurrency.id !== currency.id}]" @click="updateCurrency(currency)">
                                                                    <div class="row align-items-center justify-content-center">
                                                                        <div class="col">
                                                                            <div class="font-heading fs-10">{{currency.short_code}}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <list-component ref="pendingOrdersList" section="pendingOrdersSection" :endpoint="route('api.transaction.list')" :options="{per_page: 5, status: 2,  owner_type: 'App\\Models\\Booking', type: 1, original_currency_id_in: [selectedCurrency.id], transaction_service_id: selectedService.id}">
                                        <template slot="list" slot-scope="{data}">
                                            <supplier-pending-order-component :data="data" v-on:input="updateOrder($event)"></supplier-pending-order-component>
                                        </template>
                                    </list-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md">
                            <supplier-place-order-form-component :payments="payments" :currency="selectedCurrency" :supplier="selectedSupplier" section="pendingOrdersSection"></supplier-place-order-form-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                suppliers: [],
                selectedSupplier: {
                    id: '',
                    name: '',
                    status: false
                },
                selectedCurrency: {
                    id: 2,
                    name: '',
                    status: false
                },
                currencyDropdownLaunch: {
                    status: false
                },
                serviceDropdownLaunch: {
                    status: false
                },
                selectedService: {
                    id: 1,
                    name: '',
                    status: false
                },
                payments: []
            }
        },
        created(){
            this.submit(route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]}), 'get', 'pendingOrdersSection', false, false)
        },
        methods: {
            successHandler(response){
                this.suppliers = response.payload.data;
                this.selectedSupplier= this.suppliers[0];
                this.selectedService = this.suppliers[0].services[0];
                this.selectedCurrency = this.suppliers[0].currencies[0];
                this.updateList();
            },
            updateSupplier(supplier){
                if(supplier !== this.selectedSupplier){
                    this.selectedSupplier= supplier;
                    this.updateList();
                }
            },
            updateService(service){
                if(service !== this.selectedService){
                    this.selectedService = service;
                    this.updateList();
                }
            },
            updateCurrency(currecny){
                if(currecny !== this.selectedCurrency){
                    this.selectedCurrency = currecny;
                    this.updateList();
                }
            },
            updateList(){

                this.$refs.pendingOrdersList.updateFilters({per_page: 10000, status: 2, type: 1, original_currency_id_in: [this.selectedCurrency.id], transaction_service_id: this.selectedService.id});

                this.selectedSupplier.status = false;
                this.currencyDropdownLaunch.status = false;
                this.serviceDropdownLaunch.status = false;
                this.payments = [];

            },
            updateOrder(payment){
                this.payments.includes(payment) ? this.payments.splice(this.payments.indexOf(payment), 1) : this.payments.push(payment);
            }
        }


    }
</script>