@extends('layouts.admin') 

@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 type="text/css">
    .table td, .table th {
        font-size: 12px;
        line-height: 2.42857 !important;
    }
	select{
		width: auto !important;
	}
</style>
	<div class="content-area">
		<div class="mr-breadcrumb">
			<div class="row">
				<div class="col-lg-12">
						<h4 class="heading">Marketing</h4>
				</div>
			</div>
		</div>
		<div class="product-area">
			<div class="row" id="app">
				<div class="col-md-12">
					<div class="portlet light portlet-fit portlet-datatable bordered">
						<div class="portlet-title">
							<div class="actions"> <a class="btn btn-xs btn-success" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-plus"></i> Nuevo Registro</a> </div>
						</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>
											<th>
												<select v-model="industrie_filter" id="industrie_select" name="industrie_select">
													<option value="">Industria</option>
													<option v-for="ind in industries_selec" :value="ind.name">@{{ind.name}}</option>
												</select>
											</th>
											<th>{{Form::select('social_network',$socialList,null,['id'=>'social_network','v-model'=>'social_filter'])}}</th>
											<th>Presupuestoo</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 v-for="tdata in tableData" :key="tdata.id">
											<td>
												<input  v-model="tdata.name"  @change="updateData(tdata)" type="text" class="form-control">
											</td>
											<td>
											<select v-model="tdata.mkt_social_networks_id" @change="updateData(tdata)">
												<option v-for="tsocial in social_list" :value="tsocial.id">@{{tsocial.name}}</option>
											</select>
											</td>
											<td >
												<div class="col-auto">
													<div class="input-group mb-2">
														<div class="input-group-prepend">
														<div class="input-group-text">$</div>
														</div>
														<input @change="updateData(tdata)" v-model="tdata.budget" type="number" step="0.01" class="form-control" >
													</div>
												</div>
											</td>
											<td>
												<div class="col-auto">
													<div class="input-group mb-2">
														<div class="input-group-prepend">
														<div class="input-group-text">$</div>
														</div>
														<input @change="updateData(tdata)" v-model="tdata.cost_thousand_prints" type="number" step="0.01" class="form-control" >
													</div>
												</div>
											</td>
											<td> @{{printThousandPrints(tdata)}}</td>
											<td><input  @change="updateData(tdata)" v-model="tdata.site_visits"  type="number" step="0.001" class="form-control" placeholder="Amount"></td>
											<td> @{{printClicks(tdata)}} </td>
											<td>
												<div class="input-group">
													<input @change="updateData(tdata)" v-model="tdata.conversion" type="number" step="0.01" class="form-control"  placeholder="Amount">
													<div class="input-group-addon">%</div>
												</div>
											</td>
											<td>@{{printPotencial(tdata)}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel">Nueva Industria</h4>
								</div>
								<div class="modal-body">
									<form class="form-inline">
										<div class="row">
											<div  :class="{'form-group col-md-6': true, 'has-error': errors.has('industria') }">
												<label class="col-md-6" for="industria">Industria</label>
												<input v-model="form_data.name" v-validate="'required'" type="text"  class="form-control col-md-6" name="industria" id="industria">
												<i v-show="errors.has('industria')" class="fa fa-warning"></i>
											</div>
											<div :class="{'form-group col-md-6': true, 'has-error': errors.has('social_network_input') }">
												<label class="col-md-3" for="social_network_input">Redsocial</label>
												{{Form::select('social_network_input',$socialList,null,['id'=>'social_network_input','name'=>'social_network_input','class'=>'form-control col-md-9','v-model'=>'form_data.social','v-validate'=>"'required'"])}}
												<i v-show="errors.has('social_network_input')" class="fa fa-warning"></i>
											</div>
										</div>
										<br>
										<div class="row">
											<div class="form-group col-md-6">
												<label class="col-md-6" for="presupuesto">Presupuesto</label>
												<input  v-model="form_data.budget" type="number" step="0.01" class="form-control col-md-6" id="presupuesto" name="presupuesto">
											</div>
											<div :class="{'form-group col-md-6': true, 'has-error': errors.has('cost_thousand_prints') }">
												<label class="col-md-6" for="cost_thousand_prints">Costo x 1 millar Impresiones</label>
												<input  v-model="form_data.cost_thousand_prints" v-validate="'required'"  type="number" step="0.01" class="form-control col-md-6" id="cost_thousand_prints" name="cost_thousand_prints">
												<i v-show="errors.has('cost_thousand_prints')" class="fa fa-warning"></i>
											</div>
										</div>
										<br>
										<div class="row">
											<div :class="{'form-group col-md-6': true, 'has-error': errors.has('site_visits') }">
												<label class="col-md-6" for="site_visits">% de Visitas al sitio</label>
												<input   v-model="form_data.site_visits" v-validate="'required'" type="number" step="0.01" class="form-control col-md-6" id="site_visits" name="site_visits">
												<i v-show="errors.has('site_visits')" class="fa fa-warning"></i>
											</div>
											<div :class="{'form-group col-md-6': true, 'has-error': errors.has('conversion') }">
												<label class="col-md-6" for="conversion">Conversion</label>
												<input  v-model="form_data.conversion" v-validate="'required'" type="number" step="0.01" class="form-control col-md-6" id="conversion" name="conversion">
												<i v-show="errors.has('conversion')" class="fa fa-warning"></i>
											</div>
										</div>                            
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
									<button type="button" class="btn btn-primary"  @click="saveData">Guardar</button>
								</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 v-show="showAlert" class="alert alert-dismissible fade in" :class="alertClass"  role="alert" style="position: fixed;align-content: center;bottom: 0%;">
							<button type="button" class="close" @click="showAlert = false" aria-label="Close"><span aria-hidden="true">×</span></button>
							<strong>@{{ errorMessage }}
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>


	<script>
    Vue.use(VeeValidate);
    var app = new Vue({
    el: '#app',
    data: {
        tableData :null,
        social_list:null,
        industries_selec:null,
        industrie_filter:"",
        social_filter:"",
        form_data: {},
        showAlert: false,
        alertClass:'alert-warning',
        errorMessage: 'mensajae de pruea'
    },
    created(){
        this.getData(null);
        this.getSelect();
    },
    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) {
            // new Intl.NumberFormat().format(number)
            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);
            // return ((((tdata.budget*tdata.cost_thousand_prints)*tdata.site_visits).toFixed(2))*(tdata.conversion/100)).toFixed(2);
        },
        setAlert(msj,type){
            this.showAlert= true;
            this.errorMessage = msj;
            this.alertClass = type;
            setTimeout(()=>{
                this.showAlert= false;
            }, 3000);
        },
        getData(filter){
            axios.get('/admin/list-industrie',filter)
            .then(response => {
                this.tableData = response.data.industrieList;
                this.social_list = response.data.social;
            }).catch(e => {
                console.log(e);
            });
        },
        getSelect(){
            axios.get('/admin/get-industrie')
            .then(response => {
                this.industries_selec = response.data;
            }).catch(e => {
                console.log(e);
            });
        },
        reloadData(){
            this.form_data = {};
            this.$validator.reset();
            this.getSelect();
            this.getData(null);
            $('#myModal').modal('hide')
        },
        setFilter(){
            var params = {};
            if (this.industrie_filter != "") {
                params.industrie = this.industrie_filter
            }
            if (this.social_filter != "") {
                params.social = this.social_filter
            }
            if (Object.keys(params).length == 0) {
                this.getData();
                return false;
            }
            this.getData({'params':params});
        },
        saveData(){
            this.$validator.validateAll().then((result) => {
                if (result) {
                    axios.post('/admin/calculator',this.form_data)
                    .then(response => {
                        if(response.data.success){
                            this.reloadData();
                            this.setAlert('Datos Guardados Correctamente','alert-success');
                        } 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);
                    });
                }
            });
        },
        updateData(item){
            axios.put('/admin/calculator/'+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:{
        industrie_filter(val){
            this.setFilter();
        },
        social_filter(val){
            this.setFilter();
        }
    }
    })
</script>
@endsection