<script setup>
    import { computed, reactive } from 'vue';
    import CustomInput from './ui/CustomInput.vue';
    import Products from './ui/Products.vue';
    import TruckTypes from './ui/TruckTypes.vue';


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

    const budgetForm = reactive({
        client: '',
        material: '',
        origin: '',
        destination: '',
        num_tons: 0.0,
        price_per_ton: 0.0,
        tonnage: 0.0,
        pickup_distance: 0.0,
        delivery_distance: 0.0,
        warehouse_distance: 0.0,
        cost_per_liter: 0.0,
        fuel_price_per_liter: 0.0,
        other_fuel_expenses: 0.0,
        driver_salary: 0.0,
        accomadation_allowance: 0.0,
        other_administrative_expenses: 0.0,
        total_administrative_expenses: 0.0,
        total_before_tax: 0.0,
        total_utility_per_km: 0.0,
        total_profit: 0.0,
        profit_percentage: 0.0,
        total_travel: 0.0,
        total_fuel: 0.0,
        total_fuel_cost: 0.0,
        budgetproduct:[],
		budgetTrucktypes:[],
    })

    const clearMoal = () => {
        // loadsStore.openProposalsModal = false;
        // loadsStore.currentLoad = false; 
    }

    // const total = computed(() => {

    // });

        const totalTravel = computed(()  => {
            budgetForm.total_travel = budgetForm.warehouse_distance * 1 + budgetForm.delivery_distance * 1 + budgetForm.pickup_distance * 1;
			return budgetForm.total_travel;
        });

        const totalFuel = computed(()  => {
           budgetForm.total_fuel = budgetForm.total_travel / budgetForm.cost_per_liter;
           console.log(budgetForm.total_travel)
           console.log(budgetForm.cost_per_liter)
           console.log('TOTAL: ', budgetForm.total_fuel);
		   return isNaN(budgetForm.total_fuel) ? '0.0' : parseFloat(budgetForm.total_fuel).toFixed(2);
        });

		const totalFuelCost = computed(() => {
           budgetForm.total_fuel_cost = budgetForm.total_fuel * budgetForm.fuel_price_per_liter;
		   return "$" + (isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost).toFixed(2));
		});

		const totalAdminExpenses = computed(() => {
			budgetForm.total_administrative_expenses = budgetForm.driver_salary*1 + budgetForm.accomadation_allowance*1 + budgetForm.other_administrative_expenses*1;
		   return "$" + (isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses).toFixed(2));
		});

		const totalBeforeTax = computed(() => {
			budgetForm.total_before_tax = budgetForm.tonnage * budgetForm.price_per_ton;
			return "$" + (isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax).toFixed(2));
		});

		const totalUtilityPerKm = computed(() => {
			budgetForm.total_utility_per_km = budgetForm.total_before_tax / budgetForm.total_travel;
			return "$" + (isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km).toFixed(2));
		});

		const totalProfit = computed(() => {
			budgetForm.total_profit = budgetForm.total_before_tax - budgetForm.total_fuel_cost - budgetForm.other_fuel_expenses - budgetForm.driver_salary - budgetForm.accomadation_allowance - budgetForm.other_administrative_expenses;
			return "$" + (isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit).toFixed(2));
		});

		const totalPercentage = computed(() => {
			budgetForm.profit_percentage = budgetForm.total_profit / budgetForm.total_before_tax * 100;
			return  (isNaN(budgetForm.profit_percentage) ? '0.0' : parseFloat(budgetForm.profit_percentage).toFixed(2)) + "%";
		});

</script>

<template>
    <div class="modal fade" id="budgetModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="title mt-2 mb-3">Calculadora</h2>
                    <button 
                        id="btnClosebudgetModal" 
                        type="button" 
                        @click="clearMoal"
                        class="close bg-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body form-content">
                    <div class="container-fluid">
                            <form action="" @submit.prevent="saveBudget" autocomplete="off" method="post">
                                <div class="calculator-card">
                                    <div class="calculator-card__title">
                                        <h2>CALCULADOR DE TARIFAS</h2>                
                                    </div>
                                    <div class="calculator-card__subtitle">
                                        <h4>DATOS DE CARGA</h4>
                                    </div>
                                    <div class="calculator-card__body">
                                        <div class="calculator-card__loads_data">
                                            <CustomInput
                                                label="CLIENTE*"
                                                type="text"
                                                :filled="false"
                                                name="client"
                                                :required="true"
                                                :error="(!budgetForm.client) ? 'Cliente es requerido' : null"
                                                v-model:field="budgetForm.client"
                                            />
                                            <div class="mb-4 mt-3">
                                                <label class="custom-label">MATERIAL</label>
                                                <Products
                                                    v-model="budgetForm.budgetproduct" 
                                                />
                                            </div>
                                            <CustomInput
                                                label="ORIGEN"
                                                type="text"
                                                :filled="false"
                                                name="origin"
                                                v-model:field="budgetForm.origin"
                                            />
                                            <CustomInput
                                                label="DESTINO"
                                                type="text"
                                                :filled="false"
                                                name="destination"
                                                v-model:field="budgetForm.destination"
                                            />
                                            <div class="mb-4 mt-3">
                                                <label class="custom-label">TIPO DE CAMIÓN</label>
                                                <TruckTypes
                                                    v-model="budgetForm.budgetTrucktypes" 
                                                />
                                            </div>
                                            <CustomInput
                                                label="TONELADAS"
                                                type="number"
                                                :filled="false"
                                                name="num_tons"
                                                v-model:field="budgetForm.num_tons"
                                            />
                                            <CustomInput
                                                label="PRECIO POR TONELADA"
                                                type="number"
                                                :filled="false"
                                                name="price_per_ton"
                                                v-model:field="budgetForm.price_per_ton"
                                            />
                                        </div>         
                                    </div>
                                    <div class="calculator-card__subtitle">
                                        <h4>TARIFA / KILOMETRAJE</h4>
                                    </div>
                                    <div class="calculator-card__body">
                                        <div class="calculator-card__loads_data">
                                            <CustomInput
                                                label="TONELAJE APROXIMADO DE CARGA"
                                                type="number"
                                                :filled="false"
                                                name="tonnage"
                                                v-model:field="budgetForm.tonnage"
                                            />
                                            <CustomInput
                                                label="PRECIO POR TONELADA"
                                                type="number"
                                                :filled="false"
                                                name="price_per_ton"
                                                v-model:field="budgetForm.price_per_ton"
                                            />
                                            <CustomInput
                                                label="ORIGEN DEL CAMION AL ORIGEN DE CARGA(KM)"
                                                type="number"
                                                :filled="false"
                                                name="pickup_distance"
                                                v-model:field="budgetForm.pickup_distance"
                                            />
                                            <CustomInput
                                                label="ORIGEN DE CARGA A DESTINO DE DESCARGA(KM)"
                                                type="number"
                                                :filled="false"
                                                name="delivery_distance"
                                                v-model:field="budgetForm.delivery_distance"
                                            />
                                            <CustomInput
                                                label="DESTINO DE DESCARGA AL PATIO-BASE (KM)"
                                                type="number"
                                                :filled="false"
                                                name="warehouse_distance"
                                                v-model:field="budgetForm.warehouse_distance"
                                            />
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>TOTAL KM RECORRIDOS</h6>
                                                </div>
                                                <div>
                                                    {{ totalTravel }}
                                                </div>
                                            </div>
                                        </div>         
                                    </div>
                                    <div class="calculator-card__subtitle">
                                        <h4>COSTOS DIRECTOS CAMION</h4>
                                    </div>
                                    <div class="calculator-card__body">
                                        <div class="calculator-card__loads_data">
                                            <CustomInput
                                                label="RENDIMIENTO CAMION - LITROS POR KILOMETRO RECORRIDO"
                                                type="number"
                                                :filled="false"
                                                name="cost_per_liter"
                                                v-model:field="budgetForm.cost_per_liter"
                                            />
                                            <CustomInput
                                                label="PRECIO DEL DIESEL POR LITRO"
                                                type="number"
                                                :filled="false"
                                                name="fuel_price_per_liter"
                                                v-model:field="budgetForm.fuel_price_per_liter"
                                            />
                                            <CustomInput
                                                label="OTROS GASTOS"
                                                type="number"
                                                :filled="false"
                                                name="other_fuel_expenses"
                                                v-model:field="budgetForm.other_fuel_expenses"
                                            />
                                            <div class="calculator-card__totals">
                                                <div>
                                                <h6>TOTAL LITROS DE DIESEL CONSUMIDOS</h6>
                                                </div>
                                                <div>
                                                    {{ totalFuel }}
                                                </div>
                                            </div>
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>TOTAL COSTO DEL DIESEL</h6>
                                                </div>
                                                <div>
                                                    {{ totalFuelCost }}
                                                </div>
                                            </div>
                                        </div>         
                                    </div>
                                    <div class="calculator-card__subtitle">
                                        <h4>SUELDO OPERADOR</h4>
                                    </div>
                                    <div class="calculator-card__body">
                                        <div class="calculator-card__loads_data">
                                            <CustomInput
                                                label="GASTOS ADMINISTRATIVOS"
                                                type="number"
                                                :filled="false"
                                                name="driver_salary"
                                                v-model:field="budgetForm.driver_salary"
                                            />
                                            <CustomInput
                                                label="CASETAS"
                                                type="number"
                                                :filled="false"
                                                name="accomadation_allowance"
                                                v-model:field="budgetForm.accomadation_allowance"
                                            />
                                            <CustomInput
                                                label="OTROS GASTOS"
                                                type="number"
                                                :filled="false"
                                                name="other_administrative_expenses"
                                                v-model:field="budgetForm.other_administrative_expenses"
                                            />
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>GASTOS ADMINISTRATIVOS TOTALES</h6>
                                                </div>
                                                <div>
                                                    {{ totalAdminExpenses }}
                                                </div>
                                            </div>
                                        </div>         
                                    </div>
                                    <div class="calculator-card__subtitle">
                                        <h4>UTILIDAD / PERDIDA</h4>
                                    </div>
                                    <div class="calculator-card__body">
                                        <div class="calculator-card__loads_data">
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>TOTAL ANTES DE IVA</h6>
                                                </div>
                                                <div>
                                                    {{ totalBeforeTax }}
                                                </div>
                                            </div>
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>TOTAL UTILIDAD POR KILOMETRO</h6>
                                                </div>
                                                <div>
                                                    {{ totalUtilityPerKm }}
                                                </div>
                                            </div>
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>TOTAL UTILIDAD</h6>
                                                </div>
                                                <div>
                                                    {{ totalProfit }}
                                                </div>
                                            </div>
                                            <div class="calculator-card__totals">
                                                <div>
                                                    <h6>PORCENTAJE DE UTILIDAD</h6>
                                                </div>
                                                <div>
                                                    {{ totalPercentage }}
                                                </div>
                                            </div>
                                        </div>         
                                    </div>
                                </div>
                                <div class="mt-4 text-center">
                                    <button class="btn btn-primary myshipper-btn" type="submit">Guardar</button>
                                </div> 
                            </form>
                        </div>
                </div>
                <div class="modal-footer">
                    <button 
                        type="button" 
                        class="btn btn-dark" 
                        @click="clearMoal"
                        data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>

    .form-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: 0 auto;
        border: 1px solid grey;
    }
    
    .calculator-card {
        justify-content: center;
        margin: 0 auto;
        width: 70%;
        border: 1px solid grey;
    }

    .calculator-card__title {
        background-color: #323030;
        padding: 10px 20px;
        color: #FFF;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .calculator-card__subtitle {
        background-color: #50b1e5;
        padding: 10px 20px;
        color: #FFF;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .calculator-card__loads_data {
        padding: 24px 24px;
    }
   
   .calculator-card__totals {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 0px;
   }
</style>