<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col-12 p-l-0">
                    <small class="all-caps muted fs-10">Export Report (New)</small>
                    <download-upload-component section="exportDataSection"></download-upload-component>
                </div>
            </div>
            <div class="row">
                <div class="col-8 p-l-0">
                    <small class="all-caps muted fs-10">Export Payment Transactions CSV</small>
                    <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
                </div>
            </div>
            <div class="row">
                <div class="col-8 p-l-0">
                    <small class="all-caps muted fs-10">Download Zip White Form</small>
                    <download-supplier-white-form-component section="paymentsReportSection" ></download-supplier-white-form-component>
                </div>
            </div>
            <div class="row">
                <div class="col bg-white p-t-15 p-b-15">
                    <div class="row no-margin">
                        <!-- Complete Payments (Left Column) -->
                        <div class="col-12 col-md-4">
                            <div class="row m-b-15 p-b-10 b-b b-grey">
                                <div class="col">
                                    <small class="all-caps muted fs-10">Complete Payments</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <list-component key="2" section="paymentVerificationSection" :endpoint="route('api.transaction.list')" :options="{'type': 1, 'status': 3, 'payment_method_not_in': [4]}">
                                        <template #list="{data}">
                                            <payment-verification-component section="paymentVerificationSection" :data="data" :no_action="true"></payment-verification-component>
                                        </template>
                                    </list-component>
                                </div>
                            </div>
                        </div>

                        <!-- Currency Orders Section (Right Column) -->
                        <div class="col-12 col-md-8 b-l b-grey">
                            <!-- Supplier Filter for Currency Orders -->
                            <div class="row no-margin">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col p-l-0">
                                            <small class="all-caps muted fs-10">Filter Supplier</small>
                                        </div>
                                    </div>
                                    <div class="row m-b-20">
                                        <div class="col padding-0">
                                            <validation-wrapper-component selectable :validator="v$.filterSupplier">
                                                <label>Supplier</label>
                                                <selectable-component :disableOnFetch="true" :endpoint="route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]})" section="supplierFilterSection" valueColumn="id" :labelColumn="['name']" v-model="filterSupplier"></selectable-component>
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-2 p-l-0">
                                            <button type="button" class="btn btn-lg btn-complete fs-11 h-100 d-flex justify-content-center align-items-center" @click="reset()">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row no-margin">
                                <!-- Complete Currency Orders -->
                                <div class="col-12 col-md-6">
                                    <div class="row m-b-15 p-b-10 b-b b-grey">
                                        <div class="col">
                                            <small class="all-caps muted fs-10">Complete Currency Orders</small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <list-component :key="currencyOrderKey" section="completeTransactionGroupsListSection" :options="{ 'per_page': 20, 'status': 3, ...(filterSupplier ? { 'issuer_in': [filterSupplier] } : {}) }" :endpoint="route('api.transaction.group.list')">
                                                <template #list="{data}">
                                                    <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                </div>

                                <!-- Open Currency Orders -->
                                <div class="col-12 col-md-6">
                                    <div class="row m-b-15 p-b-10 b-b b-grey">
                                        <div class="col">
                                            <small class="all-caps muted fs-10">Open Currency Orders</small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <list-component :key="currencyOrderKey" section="transactionGroupsListSection" :options="{ 'per_page': 20, 'status_in': [0, 1, 2], ...(filterSupplier ? { 'issuer_in': [filterSupplier] } : {}) }" :endpoint="route('api.transaction.group.list')">
                                                <template #list="{data}">
                                                    <transaction-group-component section="transactionGroupsListSection" :data="data"></transaction-group-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import route from '@/general/functions/router';

const filterSupplier = ref<string>("");
const currencyOrderKey = ref(1);

const rules = {
    filterSupplier: {}
};

const v$ = useVuelidate(rules, { filterSupplier });

watch(filterSupplier, () => {
    currencyOrderKey.value += 1;
});

const reset = () => {
    filterSupplier.value = "";
};
</script>
