<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 v-for="supplier in suppliers" :key="supplier.id" class="row no-margin" :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 v-for="service in selectedSupplier.services" :key="service.id" class="row no-margin" :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 v-for="currency in selectedSupplier.currencies" :key="currency.id" class="row no-margin" :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, does_not_have_refund_in_progress: true, does_not_have_group: true }"
                                    >
                                        <template #list="{ data }">
                                            <supplier-pending-order-component :data="data" @select="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 setup lang="ts">
import { onMounted, ref } from 'vue';
import route from '@/general/functions/router';
import { useRequest } from '@/composables/useRequest';
import ListComponent from '@/components/general/elements/ListComponent.vue';

interface SupplierItem {
    id: string | number;
    name: string;
    reference?: string;
    status?: boolean;
    services: Array<Record<string, any>>;
    currencies: Array<Record<string, any>>;
}

// interface ListExpose {
//     updateFilters: (filters: Record<string, any>) => void;
// }

const { submit } = useRequest();

const pendingOrdersList = ref<InstanceType<typeof ListComponent> | null>(null);
const suppliers = ref<SupplierItem[]>([]);
const selectedSupplier = ref<Record<string, any>>({
    id: '',
    name: '',
    reference: '',
    status: false,
    services: [],
    currencies: []
});
const selectedCurrency = ref<Record<string, any>>({
    id: 2,
    name: '',
    short_code: '',
    status: false
});
const currencyDropdownLaunch = ref({ status: false });
const serviceDropdownLaunch = ref({ status: false });
const selectedService = ref<Record<string, any>>({
    id: 1,
    name: '',
    status: false
});
const payments = ref<any[]>([]);

const updateList = () => {
    pendingOrdersList.value?.updateFilters({
        per_page: 10000,
        status: 2,
        type: 1,
        original_currency_id_in: [selectedCurrency.value.id],
        transaction_service_id: selectedService.value.id,
        does_not_have_refund_in_progress: true,
        does_not_have_group: true
    });

    selectedSupplier.value.status = false;
    currencyDropdownLaunch.value.status = false;
    serviceDropdownLaunch.value.status = false;
    payments.value = [];
};

const updateSupplier = (supplier: SupplierItem) => {
    if (supplier !== selectedSupplier.value) {
        selectedSupplier.value = supplier;
        updateList();
    }
};

const updateService = (service: Record<string, any>) => {
    if (service !== selectedService.value) {
        selectedService.value = service;
        updateList();
    }
};

const updateCurrency = (currency: Record<string, any>) => {
    if (currency !== selectedCurrency.value) {
        selectedCurrency.value = currency;
        updateList();
    }
};

const updateOrder = (payment: any) => {
    const existingIndex = payments.value.indexOf(payment);
    if (existingIndex >= 0) {
        payments.value.splice(existingIndex, 1);
        return;
    }

    payments.value.push(payment);
};

onMounted(async () => {
    await submit(
        `${route('api.company.list')}?filters=${JSON.stringify({ business_type: 3, status_in: [1, 2, 0] })}`,
        'get',
        'pendingOrdersSection',
        false,
        false,
        undefined,
        {
            successHandler: (response) => {
                suppliers.value = response.payload?.data ?? [];
                if (!suppliers.value.length) {
                    return;
                }

                selectedSupplier.value = { ...suppliers.value[0], status: false };
                selectedService.value = suppliers.value[0].services?.[0] ?? { id: 1, name: '', status: false };
                selectedCurrency.value = suppliers.value[0].currencies?.[0] ?? { id: 2, short_code: '', status: false };
                updateList();
            }
        }
    );
});
</script>
