@extends('includes.navbarclient')
@section('content')
<script type="text/javascript">
		$(document).ready(function(){

      var height = $(window).height();

      $('#xd').height(height);
});
</script>
<div class="container-fluid" id="xd">
	<div class="row" style="height: 100%;">
		<!--<div class="col-2" style="background-color: #93a6b7">
			<div class="row">
				<div class="col-12">
					<h1>Servicios</h1>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-12">
					<br>
					<h5 style="color:blue;text-decoration: underline ;"><a onclick="viewForm();">+ Servicio Nuevo</a></h5>
				</div>
			</div><br>
		</div>
		<br>-->
		<div class="col-12" id="divTable">
			<div class="row">
				<div class="col-12">
					<h1>{{ trans( 'messages.servicios' ) }}</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-2">
					<a class="btn btn-info btn-block" onclick="viewForm();">+ {{ trans( 'messages.nuevo_servicio' ) }}</a>
				</div>
			</div>
			<div class="row">
				<br>
				<div class="col-3">

				</div>
				<div class="col-5"></div>
				<div class="col-2" align="right">
					<!--<button class="btn btn-primary btn-block badge-pill" style="margin-top: 10%"><i class="fa fa-pencil-alt"></i>  Editar</button>-->
				</div>
				<div class="col-2">
					<!--<button class="btn btn-danger btn-block badge-pill" style="margin-top: 10%"><i class="fa fa-times"></i>  Eliminar</button>-->
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-12">
					<table id="gridClientes" class="table table-bordered table-hover" style="background-color: white;">
						<thead>
							<tr>
								<th>No.</th>
								<th>{{ trans( 'messages.nombre' ) }}</th>
								<th>Clasificador</th>
								<th>{{ trans( 'messages.estatus' ) }}</th>
								<th>{{ trans( 'messages.acciones' ) }}</th>
							</tr>
						</thead>
						<tbody>
						

						</tbody>
					</table>
				</div>

			</div>
		</div>
		<div class="col-10" id="divFormCliente" style="display:none;">
			<div class="container-fluid">
					<div class="row">
						<div class="col-12">
							<br>
							<h5>+ Servicio Nuevo <a onclick="seeTable();" class="btn btn-primary">X</a></h5>

						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<div class="card" style="width: 100%; height: 100%; margin-top: 0px; background-color: rgba(220,220,220, 0.3) !important;">
								<div class="card-body">
									<div class="row">
									<div class="col-6">
										<div class="row">
											<div class="col-12">
												<label>
													No. Servicio
												</label>
												<input type="text" id="numeroServicio" class="form-control form-rounded">
												<input type="hidden" id="idServHidden">
											</div>
										</div>
										<div class="row">
											<div class="col-12">
												<label>
													Clasificador
												</label>
												<select id="clasificador" class="form-control form-rounded">
													@foreach ($clasificadores as $cl)
														<option value="{{ $cl['idClasificador'] }}">{{ $cl['nombre'] }}</option>
													@endforeach	
												</select>
											</div>
										</div>
										<div class="row">
											<div class="col-12">
												<label>
													Nombre
												</label>
												<input type="text" id="nombre" class="form-control form-rounded">
											</div>
										</div>
										<br>
										<div class="row">
											<div class="col-12">
												<label>
													Imagen
												</label><br>
												<input type="file" id="imagen" name="avatar" accept="image/png, image/jpeg">
											</div>
										</div>
										<div class="row" align="center">
											<div class="col-12 align-self-center">
												<button class="btn btn-info badge-pill" onclick="saveServicio();">Guardar</button>
											</div>
										</div>
									</div>
									<div class="col-6" style="display: none;">
										<div class="row">
											<div class="col-6">
												<label>Precio Bruto</label>
												<input type="text" id="bruto" class="form-control form-rounded" onkeyup="calcula();">
											</div>
											<div class="col-6">
												<label>Moneda</label>
												<select id="moneda" class="form-control" onchange="calcula();">
													<option value="1">MXN</option>
													<option value="2">DLS</option>
													<option value="2">EUR</option>
													<option value="88">CUC</option>
												</select>
											</div>
										</div>
										<div class="row">
											<div class="col-6">
												<label>Comision IAS</label>
												<input type="text" id="comisionIAS" class="form-control form-rounded" onkeyup="calcula();">
											</div>
											<div class="col-6">
												<label>Comision por Pago %</label>
												<input type="text" id="comisionPago" class="form-control form-rounded" onkeyup="calcula();">
											</div>
										</div>
										<div class="row">
											<div class="col-6">
												<label>Tipo de Cambio</label>
												<input type="text" id="tipoCambio" class="form-control form-rounded" onkeyup="calcula();">
											</div>
											<div class="col-6">
												<label>Subtotal</label>
												<input type="text" id="subtotal" class="form-control form-rounded" onkeyup="calcula();">
											</div>
										</div>
										<div class="row">
											<div class="col-6">
												<label>Total</label>
												<input type="text" id="total" class="form-control form-rounded" readonly>
											</div>
										</div><br>
										<div class="row" align="center">
											<div class="col-12 align-self-center">
												<button class="btn btn-info badge-pill" onclick="saveServicio();">Guardar</button>
											</div>
										</div>
									</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(document).ready(function() {
	loadGrid();
});
function calcula(){
	var bruto = $('#bruto').val();
	var comisionIAS = $('#comisionIAS').val();
	var tipoCambio = $('#tipoCambio').val();
	var total = $('#total').val();
	var moneda = $('#moneda').val();
	var comisionPago = $('#comisionPago').val();

    porcentPago =  ((parseFloat(bruto) + parseFloat(comisionIAS)) * parseFloat(comisionPago))/100;
    if(parseFloat(moneda)>1){
    	total = (parseFloat(bruto) + parseFloat(comisionIAS) + parseFloat(porcentPago)) * parseFloat(tipoCambio)
    }else{
    	total = (parseFloat(bruto) + parseFloat(comisionIAS) + parseFloat(porcentPago))
    }
	
	$('#total').val(parseFloat(total).toFixed(2))
}
	function loadGrid(){
		
		 //$('#').DataTable();
		 //$('#').DataTable();
		$('#gridClientes').dataTable().fnDestroy();
		$('#gridClientes').DataTable( {
	        processing: true,
	        //serverSide: true,
	        ajax: {
	            url: "servicios_table",
	            type: "POST"
	        },
	        columns: [
	            { "data": "numero_servicio" },
	            { "data": "nombre" },
	            { "data": "clasificador" },
	            { "data": "estatus" },
	            { "data": "acciones" },
	        ],
	        order: [[0,"desc"]]
	    } );
		
	}

	function viewForm(){
		$('#divFormCliente').show()
		$('#divTable').hide()
	}
	function seeTable(){
		$('#divFormCliente').hide()
		$('#divTable').show()
	}
	function saveServicio(){
	
		var numeroServicio = $('#numeroServicio').val();
		var nombre = $('#nombre').val();
		var clasificador = $('#clasificador').val();
		var bruto = $('#bruto').val();
		var comisionIAS = $('#comisionIAS').val();
		var tipoCambio = $('#tipoCambio').val();
		var total = $('#total').val();
		var moneda = $('#moneda').val();
		var comisionPago = $('#comisionPago').val();
		var idServ = $('#idServHidden').val();
		$.ajax({
			url: "save_servicio",
			type: 'POST',
			dataType: 'json',
			data: {
				numeroServicio: numeroServicio,
				nombre : nombre,
				clasificador : clasificador,
				bruto : bruto,
				comisionIAS : comisionIAS,
				tipoCambio : tipoCambio,
				total : total,
				moneda : moneda,
				comisionPago : comisionPago,
				idServ : idServ,
			},
		})
		.done(function(resp) {
			console.log(resp);
			if(resp.id>1){
				alert('Se guardo con Exito')
				seeTable();
				loadGrid();

			}else{
				alert('Algo malo paso')
			}
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
		

	}
	function getEditaDatos(id){
		//viewForm();
		$.ajax({
			url: 'datos_servicio',
			type: 'POST',
			dataType: 'json',
			data: {id: id},
		})
		.done(function(resp) {
			console.log(resp);
		
			$('#idServHidden').val(resp.servicio.idServicio);
			$('#numeroServicio').val(resp.servicio.numero_servicio);
			$('#clasificador').val(resp.servicio.idClasificador);
			$('#nombre').val(resp.servicio.nombre);
			/*$('#pais').val(resp.servicio.idPais);
			$('#comision').val(resp.servicio.comision);
			$('#estatus').val(resp.servicio.estatus);
			$('#id').val(resp.servicio.idCliente);
			$('#direccion').val(resp.servicio.direccion);*/	
			$('#divFormCliente').show()
			$('#divTable').hide()
			

		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
		
	}

</script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/brands.min.js" integrity="sha512-vPKAgm60IRSwzDO45UDVa3woLa3hmhFW9RVf8Ue2rBlkow56e6zmiBjTmHbyR7iT3Z2AccKK/bA3PNjiOp3Vjg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/conflict-detection.min.js" integrity="sha512-gBkIg9cXQqh9xQvsqYd9zUPMuhMI+eKS/KDogjece72OS0AbiGCC4o78MXrAJIVvOYHvPbAxOyO0qZNs8uEngw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/fontawesome.min.js" integrity="sha512-kI12xOdWTh/nL2vIx5Yf3z/kJSmY+nvdTXP2ARhepM/YGcmo/lmRGRttI3Da8FXLDw0Y9hRAyZ5JFO3NrCvvXA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/regular.min.js" integrity="sha512-n3lyI+8hlPaX2YoSywJxVwUWQeeCdksCdawZBaymlzL5YvWIeD4RCG1s9EF2PxGYrpJoC//ns1/O/KWAfa/vjg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/solid.min.js" integrity="sha512-JkeOaPqiSsfvmKzJUsqu7j2fv0KSB6Yqb1HHF0r9FNzIsfGv+zYi4h4jQKOogf10qLF3PMZEIYhziCEaw039tQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/v4-shims.min.js" integrity="sha512-fBnQ7cKP6HMwdVNN5hdkg0Frs1NfN7dgdTauot35xVkdhkIlBJyadHNcHa9ExyaI2RwRM7sBhoOt4R8W6lloBw==" crossorigin="anonymous"></script>-->
@endsection