<template>
    <div class="row p-t-20 text-left">
      <div class="col bg-white padding-30 b-rad-lg">
        <div class="row">
            <div class="col text-center">
                <h3>E-Invoice Info</h3>
            </div>
        </div>
        <div class="row" v-if="eInvoiceData && eInvoiceData.district">
          <div class="col">
            <div class="padding-15 bg-master-lightest m-b-10">
              <p class="muted">TIN</p>
              <p class="m-b-0">{{ eInvoiceData.tin }}</p>
            </div>
            <div class="padding-15 bg-master-lightest m-b-10" v-if="eInvoiceData.msic_code !== '0'">
              <p class="muted">MSIC Code</p>
              <p class="m-b-0">{{ eInvoiceData.msic_code }}</p>
            </div>
            <div class="padding-15 bg-master-lightest m-b-10">
                <p class="muted">Billing Address</p>
                <p class="mb-0">
                    <a data-toggle="collapse" href="#billingDetails" role="button" aria-expanded="false" aria-controls="billingDetails">
                        {{eInvoiceData.street_one}} {{eInvoiceData.street_two}}, {{eInvoiceData.district.name}}, {{eInvoiceData.post_code}} {{eInvoiceData.state.name}}, {{eInvoiceData.country.name}}
                    </a>
                </p>

                <div class="collapse mt-2" id="billingDetails">
                    <ul class="list-unstyled mb-0">
                    <li><strong>Street 1:</strong> {{eInvoiceData.street_one}}</li>
                    <li><strong>Street 2:</strong> {{eInvoiceData.street_two}}</li>
                    <li><strong>District:</strong> {{eInvoiceData.district.name}}</li>
                    <li><strong>Postcode:</strong> {{eInvoiceData.post_code}}</li>
                    <li><strong>State:</strong> {{eInvoiceData.state.name}}</li>
                    <li><strong>Country:</strong> {{eInvoiceData.country.name}}</li>
                    </ul>
                </div>
            </div>
            <div class="padding-15 bg-master-lightest m-b-10" v-if="authStore.isAdmin">
              <p class="muted">Requested Date</p>
              <p class="m-b-0">{{ eInvoiceData.e_invoice_requested_date }} (d-m-Y)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRequest } from '@/composables/useRequest';
import { useAuthStore } from '@/stores/auth';
import route from '@/general/functions/router';

const props = defineProps<{
    companyId: number;
}>();

const eInvoiceData = ref<any>(null);
const authStore = useAuthStore();
const { submit } = useRequest();

const successHandler = (response: any) => {
    eInvoiceData.value = response.payload.data;
};

const fetchData = () => {
    submit(route('api.company.einvoice.info', props.companyId), 'get', 'eInvoiceInfoViewOnlySection', false, true, undefined, {
        successHandler
    });
};

onMounted(() => {
    fetchData();
});
</script>
