@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>Rangos</h1>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-12">
					<br>
					<h5><a onclick="viewForm();">+ Nuevo Rango</a></h5>
				</div>
			</div><br>

		</div>
		<br> -->
		<div class="col-12" id="divTable">
			<div class="row">
				<div class="col-12">
					<h1>{{ trans( 'messages.rangos' ) }}</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<a class="btn btn-info" onclick="viewForm();">+ {{ trans( 'messages.nuevo_rango' ) }}</a>
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<table id="gridClientes" class="table table-bordered table-hover" style="background-color: white;">
						<thead>
							<tr>
								<th>{{ trans( 'messages.from' ) }}</th>
								<th>{{ trans( 'messages.to' ) }}</th>
								<th>{{ trans( 'messages.porcentaje' ) }}</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>+ {{ trans( 'messages.cliente_nuevo' ) }} <a onclick="seeTable();">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">
																
				


		

							<br>
							<div class="row" align="center">
								<div class="col-12 align-self-center">
									<button class="btn btn-info badge-pill" onclick="saveClient();">{{ trans( 'messages.guardar' ) }}</button>
								</div>
							</div>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="modalNew">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Rangos</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<input type="hidden" id="rangoId">	
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-6">
						<label>{{ trans( 'messages.from' ) }}</label>
						<input type="text" id="desde" class="form-control">
					</div>
					<div class="col-6">
						<label>{{ trans( 'messages.to' ) }}</label>
						<input type="text" id="hasta" class="form-control">
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<label>{{ trans( 'messages.porcentaje' ) }}</label>
						<input type="text" id="porcentaje" class="form-control">
					</div>
					<div class="col-6">
						<label>{{ trans( 'messages.estatus' ) }}</label>
						<select id="estatus" class="form-control">
							<option value="1">{{ trans( 'messages.activo' ) }}</option>
							<option value="0">{{ trans( 'messages.inactivo' ) }}</option>
						</select>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">{{ trans( 'messages.cerrar' ) }}</button>
				<button type="button" class="btn btn-primary" onclick="guardar();">{{ trans( 'messages.guardar' ) }}</button>
			</div>
		</div>
	</div>
</div>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(document).ready(function() {
	loadGrid();
});
	function loadGrid(){
		
		 //$('#').DataTable();
		$('#gridClientes').dataTable().fnDestroy();
		$('#gridClientes').DataTable( {
	        processing: true,
	        //serverSide: true,
	        ajax: {
	            url: "get_rangos",
	            type: "POST"
	        },
	        columns: [
	            { "data": "desde" },
	            { "data": "hasta" },
	            { "data": "porcentaje" },
	            { "data": "estatus" },
	            { "data": "acciones" },
	        ],
	        order: [[0,"desc"]]
	    } );
		
	}

	function viewForm(){
		$('#rangoId').val('')
		$('#desde').val('');
		$('#hasta').val('');
		$('#porcentaje').val('');
		$('#estatus').val('');	
		$('#modalNew').modal()
	}

	function guardar(){
	
		var desde = $('#desde').val();
		var hasta = $('#hasta').val();
		var porcentaje = $('#porcentaje').val();
		var estatus = $('#estatus').val();
		var id = $('#rangoId').val();
		$.ajax({
			url: "save_rango",
			type: 'POST',
			dataType: 'json',
			data: {
				desde: desde,
				hasta : hasta,
				porcentaje : porcentaje,
				estatus : estatus,
				id : id,
			},
		})
		.done(function(resp) {
			console.log(resp);
			if(resp.id>0){
				$('#modalNew').modal('hide')
				alert('Se guardo con Exito')
				loadGrid();

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

	}
	function addProveModal(){
		$('#proveName').val('');
		$('#proveCorreo').val('');
		$('#modalAddProve').modal()
	}
	function guardaProve(){
		var nombre = $('#proveName').val();
		var correo = $('#proveCorreo').val();

		$.ajax({
			url: 'save_prove',
			type: 'POST',
			dataType: 'json',
			data: {nombre : nombre, correo : correo},
		})
		.done(function(resp) {
			console.log("success");
			if(resp.id>1){
				alert('Se guardo con Exito')
				$('#prove').append('<option value="'+resp.id+'">'+nombre+'</option>')
				$('#prove').val(resp.id)
				$('#modalAddProve').modal('hide')

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

	}
	function getEditaDatos(id){
		$.ajax({
			url: 'datos_rango',
			type: 'POST',
			dataType: 'json',
			data: {id: id},
		})
		.done(function(resp) {
			console.log(resp);
	        	$('#rangoId').val(id)
			$('#desde').val(resp.rangos.desde);
			$('#hasta').val(resp.rangos.hasta);
			$('#porcentaje').val(resp.rangos.porcentaje);
			$('#estatus').val(resp.rangos.estatus);
			
			$('#modalNew').modal()

		})
		.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