<script setup>
    import { onMounted, ref, watch } from 'vue';
    import {useCompanyStore} from '../stores/company';
    import {useAuthStore} from '../stores/auth';
    import Spiner from '../components/ui/Spiner.vue';
    import {getTypeCompany} from '../helpers/type_company'
    import {getDateMonthDay} from '../helpers/date_formats'
    import EditCompanyModal from '../components/ui/EditCompanyModal.vue';

    const auth = useAuthStore()
    const company = useCompanyStore();

    onMounted(() => {
        getInitialData()
    });

    const getInitialData = async() => {
        await auth.authenticationPromise;
        await company.getCompanyData();
    }


</script>

<template>
    <EditCompanyModal v-if="company.loading === false"/>
    <div>
        <h2 class="title my-5">Mi empresa</h2>
        <div class="card-info">
            <Spiner v-if="company.loading"/>
            <div v-else class="view">
                <div class="header-info">
                    <h2>{{ company.company?.company_name }}</h2>
                    <button
                        class="btn-primary-sm"
                        data-toggle="modal" data-target="#editcompanymodal"
                    ><i class="fa-solid fa-pen-to-square"></i> Editar empresa</button>
                </div>
                <div class="divider mb-4"></div>
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="item-company">
                            <span class="font-weight-bold">RFC: </span>
                            {{company.company?.rfc}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Tipo de empresa: </span>
                            {{getTypeCompany(company.company?.company_type[0])}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Código: </span>
                            {{company.company?.company_code}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Empresa miembro desde: </span>
                            {{getDateMonthDay(company.company?.createAt)}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Afiliación: </span>
                            {{ company.company?.membership }}
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="item-company">
                            <span class="font-weight-bold">Segmento de empresa: </span>
                            {{company.company?.categories.map((e) => e.name).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Ubicación de carga por estado: </span>
                            {{company.company?.company_state.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Ubicación de carga por municipio: </span>
                            {{company.company?.company_city.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Transportes utilizados: </span>
                            {{company.company?.truck_type.map((e) => e).join(', ')}}
                        </div>
                        <div class="item-company">
                            <span class="font-weight-bold">Información general de la empresa: </span>
                            {{ company.company?.company_description }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .header-info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .header-info h2 {
        font-size: 1.6rem;
        font-weight: 700;
    }
    .view {
        width: 100%;
    }

    .item-company {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        color: #323030;
        /* font-weight: bold; */
    }

    .item-company span {
        font-weight: bold;
    }
</style>