<script setup>
    import { useCompanyStore } from '../stores/company';

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

    defineEmits(['set-budget'])

    const companyStore = useCompanyStore();

    const handleDeleteBudget = async() => {
        Swal.fire({
            title: 'Eliminar Presupuesto!',
            text: '¿Estás seguro de eliminar este presupuesto?',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar',
        }).then(async(result) => {
            if(result.isConfirmed) {
                Swal.fire({
                    title: 'Por favor espere!',
                    html: 'Eliminando presupuesto...',// add html attribute if you want or remove
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                const resp = await companyStore.deleteBudgetCompany(props.budget._id);
                if(resp != null) {
                    Swal.fire({
                        title: "Presupuesto eliminado!",
                        text: "Tu presupuesto ha sido eliminado exitosamente.",
                        icon: "success"
                    });
                } else {
                    Swal.fire({
                        title: "No eliminado!",
                        text: "Tu presupuesto no se pudo eliminar, intente más tarde.",
                        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>Cliente:</span> {{budget.client}}</p>
                    <p v-if="budget.material"><span>Material:</span> {{budget.material.name}}</p>
                    <p><span>Origen:</span> {{budget.origin}}</p>
                    <p><span>Destino:</span> {{budget.destination}}</p>
                    <p><span>Tipo de camión:</span> {{budget.truck_type}}</p>
                    <p><span>Total KM recorridos:</span> {{budget.total_km_travel}}</p> 
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <p><span>Total Litros De Diesel Consumidos: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
                    <p><span>Total Costo Del Diesel:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p> 
                    <p><span>Total Antes De Iva:</span> ${{budget.total_before_tax}}</p>
                    <p><span>Total Utilidad Por Kilometro:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
                    <p><span>Total Utilidad:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
                    <!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p>  -->
                    <p><span>Porcentaje De Utilidad:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
                    
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button 
                class="btn-primary-sm radius-sm"
                @click="handleDeleteBudget"
            >
                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
            </button>
            <button 
                class="btn-primary-sm radius-sm"
                @click="$emit('set-budget')"
                data-toggle="modal" data-target="#budgetModal"
            >
                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
            </button>
            <button type="button"  class="btn btn-dark">
                <i class="fa-solid fa-print" /> <span class="clear-xsm">Imprimir</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;
    }

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