@extends('layouts.vendor') 

@section('content')  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vee-validate@<3.0.0"></script> 
<style>
    .row-header{
        font-size: 10px !important;
    }
    .ttitle-mkt {
    background-color: #eae73d;
    font:10px;
     /* color: white; */
    }
</style>
					<input type="hidden" id="headerdata" value="PRODUCT">
					<div class="content-area">
						<div class="mr-breadcrumb">
							<div class="row">
								<div class="col-lg-12">
										<h4 class="heading">{{ $langg->lang1013 }}</h4>
									
								</div>
							</div>
						</div>
						<div class="container" id="appMkt">
							<div class="row">
								<div class="col-md-12"  >
									<div class="portlet light portlet-fit portlet-datatable bordered">
										<div class="portlet-ttitle">
											<h5 class="ttitle-mkt">Calculadora <br>( calcula los clientes aproximados que puedes convertir por medio de las redes sociales ) este calculo es un aproximado de métricas basados en los estadísticos globales que se encuentran en la red de múltiples fuentes.</h5>
										</div>
										<div class="portlet-body">
											<div class="table-container table-responsive">
												<table class="table table-striped table-bordered table-hover" style="width:100%"  id="mktDatatableAjax">
													<thead>
														<tr class="row-header">
															<th>
																Industria</th>
															</th>
															<th>Red Social</th>
															<th>Presupuesto</th>
															<th>Costo x 1 millar Impresiones</th>
															<th>Impresiones</th>
															<th>% de Visitas al sitio</th>
															<th>Clicks</th>
															<th>Conversion</th>
															<th>Clientes Potenciales</th>
														</tr>
													</thead>
													<tbody>
														<tr class="row-header" v-for="tdata in tableData" :key="tdata.id">
															<td>
																@{{tdata.mkt_industries.name}}
															</td>
															<td>
																@{{tdata.social.name}}
															</td>
															<td >
																<input  @change="updateData(tdata)" v-model="tdata.budget"  type="number" step="0.01" class="form-control" >
															</td>
															<td>
																@{{tdata.mkt_industries.cost_thousand_prints}}
															</td>
															<td> @{{printThousandPrints(tdata)}}</td>
															<td>@{{tdata.mkt_industries.site_visits}}</td>
															<td> @{{printClicks(tdata)}} </td>
															<td>
																@{{tdata.mkt_industries.conversion}} %
															</td>
															<td>@{{printPotencial(tdata)}}</td>
														</tr>
														<tr class="row-header" v-show="showForm">
															<td>
															{{Form::select('industries_form',$industriaList,null,['id'=>'industries_form','v-model'=>'form_data.industrie','v-validate'=>"'required'"])}}
															</td>
															<td :class="{'': true, 'has-error': errors.has('red_social') }">
																<select v-validate="'required'" v-model="form_data.mkt_social_networks_id" v-if="form_data.industrie != ''" name="red_social">
																	<option value="">Seleccione una Red Social</option>
																	<option v-for="tsocial in social_list" :value="tsocial.id">@{{tsocial.name}}</option>
																</select>
															</td>
															<td :class="{'': true, 'has-error': errors.has('buget') }">
																<template v-if="form_data.industrie != '' && form_data.mkt_social_networks_id != ''">
																	<input v-validate="'required|greaterThanZero'" v-model="form_data.budget"  type="number" step="0.01" class="form-control" name="buget" >
																</template>
															</td>
															<td>
																@{{form_data.cost_thousand_prints}}
															</td>
															<td>
																<template v-if="form_data.industrie != '' && form_data.mkt_social_networks_id != '' && form_data.budget > 0">
																	@{{printThousandPrints(form_data)}}
																</template>
															</td>
															<td>
																@{{form_data.site_visits}}
															</td>
															<td>
																<template v-if="form_data.industrie != '' && form_data.mkt_social_networks_id != '' && form_data.budget > 0">
																	@{{printClicks(form_data)}}
																</template>
															</td>
															<td>
																<template v-if="form_data.industrie != '' && form_data.mkt_social_networks_id != '' && form_data.budget > 0">
																	@{{form_data.conversion}} %
																</template>
															</td>
															<td>
																<template v-if="form_data.industrie != '' && form_data.mkt_social_networks_id != '' && form_data.budget > 0">
																	@{{printPotencial(form_data)}}
																</template>
															</td>
														</tr>
														<tr class="row-header" v-show="!showForm"><td ><button type="button" @click="showForm = true" class=" row-header btn btn-success">{{__('Add Marketing')}} </button</td></tr>
														<tr class="row-header" v-show="showForm"><td ><button type="button" @click="save" class=" row-header btn btn-primary">{{__('Save Marketing')}} </button</td></tr>
													</tbody>
												</table>
												
											</div>
										</div>
									</div>
								</div>
								</div>
								<div v-show="showAlert" class="alert alert-dismissible fade show" :class="alertClass" role="alert" style="position: fixed;align-content: center;bottom: 0%;">
									@{{ errorMessage }}
									<button type="button" class="close"  aria-label="Close" @click="showAlert = false">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
							</div>
					</div>





@endsection    

@section('scripts')
<script>
    Vue.use(VeeValidate);
    var app = new Vue({
    el: '#appMkt',
    data: {
        tableData :null,
        industries_filter:'',
        social_filter:'',
        social_list:null,
        form_data: {industrie:"",mkt_social_networks_id:"",budget:0},
        showAlert: false,
        alertClass:'alert-warning',
        errorMessage: 'mensajae de pruea',
        showForm:false,
    },
    created(){
        this.getList(null);
        this.$validator.extend(
            'greaterThanZero',{
            getMessage: field =>  field + ' needs to be > zero.',
            validate: (value) => {
                // value must be > zero
                if (value > 0 ) return true;
                return false;
            }
        });
    },
    methods: {
        printThousandPrints (tdata) {
            tdata.thousandPrints = (tdata.budget*(tdata.cost_thousand_prints * 1000)).toFixed(2);
            return new Intl.NumberFormat('en-US').format(tdata.thousandPrints);
        },
        printClicks (tdata) {
            tdata.clicks = ((tdata.thousandPrints / 100) * tdata.site_visits).toFixed(2)
            return tdata.clicks;
        },
        printPotencial (tdata) {
            tdata.potencial = (tdata.clicks/100)*tdata.conversion;
            return tdata.potencial.toFixed(2);
        },
        setAlert(msj,type){
            this.showAlert= true;
            this.errorMessage = msj;
            this.alertClass = type;
            setTimeout(()=>{
                this.showAlert= false;
            }, 3000);
        },
        getList(filter){
            axios.get('/vendor/marketing/list',filter)
            .then(response => {
                this.tableData = response.data.data;
                for (let index = 0; index < this.tableData.length; index++) {
                    let element = this.tableData[index];
                    this.tableData[index].cost_thousand_prints = element.mkt_industries.cost_thousand_prints;
                    this.tableData[index].site_visits = element.mkt_industries.site_visits;
                    this.tableData[index].conversion = element.mkt_industries.conversion;                    
                }
            }).catch(e => {
                console.log(e);
            });
        },
        reloadData(){
            this.$validator.pause()
            this.$nextTick(() => {
            this.$validator.errors.clear()
            this.$validator.fields.items.forEach(field => field.reset())
            this.$validator.fields.items.forEach(field => this.errors.remove(field))
            this.$validator.resume()
            })
            this.showForm = false;
            this.getList(null);
            this.form_data = {industrie:"",mkt_social_networks_id:"",budget:0};
        },
        setFilter(){
            var params = {};
            if (this.industries_filter != "") {
                params.industrie = this.industries_filter
            }
            if (this.social_filter != "") {
                params.social = this.social_filter
            }
            if (Object.keys(params).length == 0) {
                this.getList(null);
                return false;
            }
            this.getList({'params':params});
        },
        save(){
            this.$validator.validateAll().then((result) => {
                if (result) {
                    axios.post('marketing',this.form_data)
                    .then(response => {
                        if(response.data.success){
                            this.setAlert('Datos Guardados Correctamente','alert-success');
                            this.reloadData();
                        } else {
                            this.setAlert('Ocurrio un error al guardar los datos','alert-danger');
                        }
                    }).catch(e => {
                        this.setAlert('Ocurrio un error al guardar los datos','alert-danger');
                        console.log(e);
                    });
                }
            });
        },
        getSocialForm(item){
            axios.get('marketing/social',item)
            .then(response => {
                this.social_list = response.data;
            }).catch(e => {
                console.log(e);
            });
        },
        getData(item){
            axios.get('marketing/data',item)
            .then(response => {
                let data = response.data;
                this.form_data.cost_thousand_prints = data.cost_thousand_prints;
                this.form_data.site_visits = data.site_visits;
                this.form_data.conversion = data.conversion;
                this.form_data.industrie_rel = data.id;
            }).catch(e => {
                console.log(e);
            });
        },
        updateData(item){
			axios.put('marketing/update/'+item.id,item)
            .then(response => {
                this.reloadData();
                this.setAlert('Datos Actualizados Correctamente','alert-success');
            }).catch(e => {
                this.setAlert('Ocurrio un error al guardar los datos','alert-danger');
                console.log(e);
            });
        }
    },
    watch:{
        'form_data.industrie'(val){
            if (val != "") {
                this.getSocialForm({'params':{industrie:val}});
            }
        },
        'form_data.mkt_social_networks_id'(val){
            if (val != "") {
                this.getData({'params':{name:this.form_data.industrie,social:val}});
            }
        },
        industries_filter(val){
            this.setFilter();
        },
        social_filter(val){
            this.setFilter();
        }
    }
    })
</script>
@endsection