<script setup>
    import Swal from 'sweetalert2';
    import { useCompanyStore } from '../stores/company';
    import { useI18n } from 'vue-i18n';

    const props = defineProps({
        budget: {
            type: Object,
            required: true
        }
    })

    defineEmits(['set-budget'])

    const companyStore = useCompanyStore();

    const { t } = useI18n();

    const handleDeleteBudget = async() => {
        Swal.fire({
            title: t('calculator.titleDel'),
            text: t('calculator.textDel'),
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: t('buttons.delete'),
            cancelButtonText: t('buttons.cancel'),
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: t('messages.loading'),
                    html:  t('calculator.loadingDel'),// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const resp = await companyStore.deleteBudgetCompany(props.budget._id);
                Swal.close();
                if(resp !== null) {
                    Swal.fire({
                        title: t('calculator.msgTitleDel'),
                        text: t('calculator.msgDel'),
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: t('calculator.msgTitleNotDel'),
                        text: t('calculator.msgNotDel'),
                        icon: "error"
                    });
                }
            }

        });

    }
</script>

<template>
    <div class="card-fixed card-budget">
        <div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <p><span>{{ t('calculator.client') }}:</span> {{budget.client}}</p>
                    <p v-if="budget.material"><span>{{ t('loads.product') }}:</span> {{budget.material.name}}</p>
                    <p><span>{{ t('loads.origin') }}:</span> {{budget.origin}}</p>
                    <p><span>{{ t('loads.destination') }}:</span> {{budget.destination}}</p>
                    <p><span>{{ t('loads.truckType') }}:</span> {{budget.truck_type}}</p>
                    <p><span>{{ t('calculator.totalkm') }}:</span> {{budget.total_km_travel}}</p> 
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <p><span>{{ t('calculator.totallt') }}: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
                    <p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p> 
                    <p><span>{{ t('calculator.totalBeforeIva') }}:</span> ${{budget.total_before_tax}}</p>
                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
                    <p><span>{{ t('calculator.totalUtity') }}:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
                    <!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p>  -->
                    <p><span>{{ t('calculator.percentUtility') }}:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
                    
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button 
                class="btn btn-danger radius-sm"
                @click="handleDeleteBudget"
            >
                <i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
            </button>
            <button 
                class="btn-primary-sm radius-sm"
                @click="$emit('set-budget', {budget: budget, print: false})"
                data-toggle="modal" data-target="#budgetModal"
            >
                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
            </button>
            <button 
                type="button"  
                class="btn btn-dark"
                @click="$emit('set-budget', {budget: budget, print: true})"
                data-toggle="modal" data-target="#budgetModal"
            >   
                <i class="fa-solid fa-print" /> <span class="clear-xsm">{{ t('calculator.print') }}</span>
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .card-budget {
        flex-direction: column;
    }

    p {
        font-size: 1rem;
        font-weight: normal;
    }

    p span {
        font-weight: bold;
        color: rgb(66, 46, 46);
    }

    .card-footer {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }
</style>