@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>{{ trans( 'messages.clientes' ) }}</h1>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-12">
					<br>
					<h5 style="color:blue;text-decoration: underline;"><a onclick="viewForm(1);">+ {{ trans( 'messages.cliente_nuevo' ) }}</a></h5>
				</div>
			</div><br>
			<div class="row">
				<div class="col-12">
					<h5><a onclick="viewForm(2);">Registro por Layout</a></h5>
				</div>
			</div>
		</div>-->

		<div class="col-12" id="divTable">
			<div class="row">
				<div class="col-12">
					<h1>{{ trans( 'messages.clientes' ) }}</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-2">
					<a class="btn btn-info btn-block" onclick="viewForm(1);">+ {{ trans( 'messages.cliente_nuevo' ) }}</a>
				</div>
				<div class="col-3">
					<a class="btn btn-info btn-block" onclick="viewForm(2);">{{ trans( 'messages.reg_layout' ) }}</a>
				</div>
			</div>
			<div class="row">
				<br>
				<div class="col-3">
					<label>{{ trans( 'messages.pais' ) }}</label>
					<select class="form-control" id="">
						@foreach ($paises as $pais)
							<option value="{{ $pais['idpais'] }}">{{ $pais['pais'] }}</option>
						@endforeach	
					</select>
				</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.Cuba</th>
								<th>{{ trans( 'messages.cliente' ) }}</th>
								<th>{{ trans( 'messages.direccion' ) }}</th>
								<th>{{ trans( 'messages.pais' ) }}</th>
								<th>Email</th>
								<th>{{ trans( 'messages.telefono' ) }}</th>
								<th>ID</th>
								<th>Estatus</th>
								<th>Acciones</th>
								
							</tr>
						</thead>
						<tbody>

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

			</div>
		</div>
		<div class="col-10" id="divFormLayout" style="display:none;">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<br>
						<h5>Registro por Layout  <a onclick="seeTable(2);" 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">
								<form method="post" action="{{url('admin/import_excel')}}" enctype="multipart/form-data">
							        {{csrf_field()}}
							        <input type="file" name="excel">
							        <br><br>
							        <input class="btn btn-primary" type="submit" value="Enviar" style="padding: 10px 20px;">
							    </form>
							</div>	
						</div>
					</div>
				</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(1);" 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-4">
									<label>{{ trans( 'messages.numero_cliente' ) }}</label>
									<input type="text" id="id" class="form-control form-rounded" readonly="" placeholder="Autoincremet">
								</div>
								<div class="col-4">
									<label>No. Cliente Cuba</label>
									<input type="text" id="idCuba" class="form-control form-rounded">
								</div>
								<div class="col-4"></div>
							</div>
							<div class="row">
								<div class="col-4">
									<label>{{ trans( 'messages.cliente' ) }}</label>
									<input type="text" id="nombre" class="form-control form-rounded">
								</div>
								<div class="col-4">
									<label>E-mail</label>
									<input type="text" id="email" class="form-control form-rounded">
								</div>
								<div class="col-4">
									<label>{{ trans( 'messages.telefono' ) }}</label>
									<input type="text" id="tel" class="form-control form-rounded">
								</div>
							</div>
							<div class="row">
								<div class="col-4">
									<label>Pais</label>
									<select id="pais" class="form-control form-rounded">
										@foreach ($paises as $pais)
											<option value="{{ $pais['idpais'] }}">{{ $pais['pais'] }}</option>
										@endforeach	
									</select>
								</div>
								<div class="col-8">
									<label>Direccion</label>
									<input type="text" id="direccion" class="form-control form-rounded">
								</div>
							</div>
							<div class="row">
								<div class="col-2">
									<label>%Comision</label>
									<input type="text" id="comision" class="form-control form-rounded">
								</div>
							</div>
							<div class="row">
								<div class="col-3">
									<label>Proveedor</label>
									<select class="form-control form-rounded" id="prove" onchange="agregaCorreo();">
										@foreach ($proves as $p)
											<option value="{{ $p['idProve'] }}" nombre="{{ $p['correo'] }}">{{ $p['nombre'] }}</option>
										@endforeach	
									</select>
									
								</div>
								<div class="col-1"><br>
									<div class="center-block">
										<button class="btn btn-primary" onclick="addProveModal();">+</button>
									</div>
								</div>
								<div class="col-4">
									<label>Correo</label>
									<input type="text" id="prove_email" class="form-control form-rounded">
								</div>
								<div class="col-4">
									<label>Estatus</label>
									<select id="estatus" class="form-control">
										<option value="1">Activo</option>
										<option value="0">Inactivo</option>
									</select>
								</div>
							</div>
							<br>
							<div class="row" align="center">
								<div class="col-12 align-self-center">
									<button class="btn btn-info badge-pill" onclick="saveClient();">Guardar</button>
								</div>
							</div>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalAddProve">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h4 class="modal-title">Agrega Proveedor</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<label>Nombre Proveedor</label>
							<input type="text" class="form-control" id="proveName">
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<label>Correo</label>
							<input type="text" class="form-control" id="proveCorreo">
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
				<button type="button" class="btn btn-primary" onclick="guardaProve();">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,
		responsive: true,
	        ajax: {
	            url: "get_clientes",
	            type: "POST"
	        },
	        columns: [
	         	{ "data": "idCuba" },
	         	{ "data": "nombre" },
	         	{ "data": "direccion" },
	         	{ "data": "pais_display" },
	         	{ "data": "email" },
	         	{ "data": "telefono" },
	            { "data": "idCliente" },
	            { "data": "estatus" },
	            { "data": "acciones" },
	        ],
	        order: [[0,"desc"]]
	    } );
		
	}

	function viewForm(vista){
		if(vista==1){
			$('#idCuba').val('');
			$('#nombre').val('');
			$('#email').val('');
			$('#tel').val('');
			$('#pais').val('');
			$('#comision').val('');
			$('#estatus').val(1);
			$('#id').val('');
			$('#direccion').val('');
			$('#divFormCliente').show()
			$('#divTable').hide()
			$('#divFormLayout').hide()
		}else{
			$('#divFormCliente').hide()
			$('#divFormLayout').show()
			$('#divTable').hide()
		}

		
	}
	function seeTable(vista){
		if(vista==1){
			$('#divFormCliente').hide()
		}else{
			$('#divFormLayouts').hide()
		}
		
		$('#divTable').show()
	}
	function saveClient(){
	
		var idCuba = $('#idCuba').val();
		var nombre = $('#nombre').val();
		var email = $('#email').val();
		var tel = $('#tel').val();
		var pais = $('#pais').val();
		var direccion = $('#direccion').val();
		var prove = $('#prove').val();
		var prove_email = $('#prove_email').val();
		var estatus = $('#estatus').val();
		var comision = $('#comision').val()
		var id = $('#id').val();
		$.ajax({
			url: "save_cliente",
			type: 'POST',
			dataType: 'json',
			data: {
				idCuba: idCuba,
				nombre : nombre,
				email : email,
				tel : tel,
				pais : pais,
				direccion : direccion,
				prove : prove,
				prove_email : prove_email,
				estatus : estatus,
				comision : comision,
				id : id,
			},
		})
		.done(function(resp) {
			console.log(resp);
			if(resp.id>0){
				alert('Se guardo con Exito')
				seeTable(1);
				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(idCliente){
		$.ajax({
			url: 'datos_cliente',
			type: 'POST',
			dataType: 'json',
			data: {id: idCliente},
		})
		.done(function(resp) {
			console.log(resp);
		
			$('#idCuba').val(resp.cliente.idCuba);
			$('#nombre').val(resp.cliente.nombre);
			$('#email').val(resp.cliente.email);
			$('#tel').val(resp.cliente.telefono);
			$('#pais').val(resp.cliente.idPais);
			$('#comision').val(resp.cliente.comision);
			$('#estatus').val(resp.cliente.estatus);
			$('#id').val(resp.cliente.idCliente);
			$('#direccion').val(resp.cliente.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