@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('bootstrap-select/css/bootstrap-select.min.css') }}

<style type="text/css">
	.span-s{
		font-size: 20px;
	}
	.color-head-modal .modal-header {
		background-color: #363b3f !important;
	}
	.modal-header .bootstrap-dialog-close-button{
		display: block !important;
	}
	#slEstados>option:first-child{
		pointer-events: none;
		opacity: 0.5;
	}
	#slEstados + div [data-original-index="0"]{
		pointer-events: none;
		opacity: 0.5;
	}
	.mdAvatar .modal-dialog .modal-content .modal-header{ background-color: #363B3F; }	
	#tblProveedorEP .dataTables_wrapper .dataTables_length, #tblProveedorEP .dataTables_wrapper .dataTables_paginate {
		display: none !important;
	}
	#tblProveedorEP .aVM {
		cursor: pointer;
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-shopping-cart"></i> Gestión de ventas en línea </h2>
	</div>
</div>

<div class="row">
	<div class="col-md-3">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Agregar Estados/Departamentos de Envío </h3> </div>
			<div class="porlets-content">
				{{ Form::open(array('route' => 'SysWebVentasConfEnviosProveedoresDepartamentos', 'method' => 'post', 'class' => 'form-horizontal row-border', 'id' => 'frmAgregar', 'files' => true, 'target' => 'upload_iframe')) }}
					<div class="form-group">
						<select class="crs-country hide" id="slPais" data-value="shortcode" data-default-value="{{ $Pais->pais }}" data-region-id="slEstados">
						<select>
						<select class="form-control selectpicker" multiple data-live-search="true" data-default-option="Selecione una opción" title="Selecione una opción"  data-actions-box="true" id="slEstados" name="slEstados[]" title="Seleccione los estados disponibles">
						<select>
					</div>
					<div class="bottom">
						{{ Form::button('Guardar', array('class' => 'btn btn-primary', 'id' => 'btnAgregar', 'type' => 'submit')) }}
						{{ HTML::linkRoute('SysWebVentasConfEnviosProveedores', 'Cancelar', array($Pais->id), array('class' => 'btn btn-default')) }}
					</div>
				{{ Form::close() }}
			</div>
		</div>
	</div>
	<div class="col-md-9">
		<div class="block-web">
			<div class="header"> <h3 class="content-header"> Listado de estados disponibles </h3> </div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblProveedorEP">
						<thead>
							<tr>
								<th class=""> Estado </th>
								<th class=""> Rangos de precios por peso (Gramos) </th>
								<th class=""> Rangos de precios por precios ({{ $moneda }}) </th>
								<th class=""> Tiempo </th>
								<th style="width: 18%;" class=""> Acciones </th>
							</tr>
						</thead>
						</table>
				</div>
			</div>
		</div>
	</div>
	
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('country-region-selector/crs.min.js') }}
{{ HTML::script('bootstrap-select/js/bootstrap-select.js') }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/localization/messages_es.min.js"></script>
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
{{ HTML::script('bootstrap-datetimepicker/js/moment-with-locales.js') }}
{{ HTML::script('bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}
{{ HTML::script('bootstrap-number-input/bootstrap-number-input.js') }}
{{ HTML::script('Alphanum/jquery.alphanum.min.js') }}
<script type="text/javascript">
	function Tiempo(id, inicio, fin, tiempo){
		var id = id;
		var inicio = inicio;
		var fin = fin;
		var tiempo = tiempo;
		var mensaje = '<div class="row"> \
			<div class="col-xs-12"> \
				<form id="frmEliminar"> \
					<h3>Tiempo estimado de entrega  </h3> \
					<input type="hidden" name="idP" value="'+id+'"> \
					<div class="col-md-4"> \
						<label class="control-label"> Tiempo </label> \
						<select class="form-control selectpicker" name="slTiempo"> \
							<option value="H">Horas</option> \
							<option value="D">Dias</option> \
						</select> \
					</div> \
					<div class="col-md-4"> \
						<div class="form-group divInicio"> \
							<label class="control-label"> Inicio </label> \
							<input type="text" class="form-control " name="fechaInicio" id="fechaInicio" step="0.1" min="0" max="30"> \
							<span class="text-danger" id="errfechaInicio"> </span> \
						</div> \
					</div> \
					<div class="col-md-4"> \
						<div class="form-group divFin"> \
							<label class="control-label"> Fin </label> \
							<input type="text" class="form-control " name="fechaFin" id="fechaFin"  min="1" max="60"> \
							<span class="text-danger" id="errfechaFin"> </span> \
						</div> \
					</div> \
				</form> \
			</div> \
		</div>';
		BootstrapDialog.show({
			title: "Editar tiempo de entrega",
			type: BootstrapDialog.TYPE_PRIMARY,
			size: BootstrapDialog.SIZE_NORMAL,
			message: mensaje,
			draggable: true,
			closable: false,
			closeByBackdrop: false,
			cssClass: "ModalTiempo color-head-modal",
			onshown: function(modalDialog){
				$("body").addClass("modal-open");
				var newDate = new Date();
				var ventana = modalDialog.getModalBody();
				ventana.find('[name="fechaInicio"]').val(inicio);
				ventana.find('[name="fechaFin"]').val(fin);
				ventana.find('[name="slTiempo"]').val(tiempo);
				ventana.find(".selectpicker").selectpicker();
				ventana.find('[name="slTiempo"]').change(function(){
					if($(this).val() == "H"){
						ventana.find('[name="fechaFin"]').prop("step", 0.1);
						ventana.find('[name="fechaInicio"]').prop("step", 0.1);
						ventana.find(".divInicio").find(".input-group").prop("outerHTML", ventana.find('[name="fechaInicio"]').prop("outerHTML"));
						ventana.find(".divFin").find(".input-group").prop("outerHTML", ventana.find('[name="fechaFin"]').prop("outerHTML"));
						ventana.find("#fechaInicio").bootstrapNumber({
							min: 0,
							max: 30,
						});
						ventana.find("#fechaFin").bootstrapNumber({
							min: 1,
							max: 60,
						});
						ventana.find('[name="fechaInicio"]').val(inicio);
						ventana.find('[name="fechaFin"]').val(fin);
					}
					else {
						ventana.find('[name="fechaFin"]').attr("step", 1);
						ventana.find('[name="fechaInicio"]').attr("step", 1);
						ventana.find(".divInicio").find(".input-group").prop("outerHTML", ventana.find('[name="fechaInicio"]').prop("outerHTML"));
						ventana.find(".divFin").find(".input-group").prop("outerHTML", ventana.find('[name="fechaFin"]').prop("outerHTML"));
						ventana.find("#fechaInicio").bootstrapNumber({
							min: 0,
							max: 30,
						});
						ventana.find("#fechaFin").bootstrapNumber({
							min: 1,
							max: 60,
						});
						ventana.find('[name="fechaInicio"]').val(inicio);
						ventana.find('[name="fechaFin"]').val(fin);
					}
				})
				ventana.find('[name="slTiempo"]').change();
				ventana.find('[name="fechaFin"]').closest(".input-group").find(".btn").click(function(){
					if (ventana.find('[name="fechaFin"]').val() <  ventana.find('[name="fechaInicio"]').val()) {
						ventana.find("#errfechaFin").text("El valor este campo no puede ser menor que el de inicio");
					}
					else{
						ventana.find("#errfechaFin").text("");
					}
				});
				ventana.find('[name="fechaInicio"]').closest(".input-group").find(".btn").click(function(){
					if (ventana.find('[name="fechaFin"]').val() <  ventana.find('[name="fechaInicio"]').val()) {
						ventana.find("#errfechaFin").text("El valor este campo no puede ser menor que el de inicio");
					}
					else{
						ventana.find("#errfechaFin").text("");
					}
				});
				ventana.find('[name="fechaFin"]').blur(function(){
					if ($(this).val() <  ventana.find('[name="fechaInicio"]').val()) {
						ventana.find("#errfechaFin").text("El valor este campo no puede ser menor que el de inicio");
					}
					else{
						ventana.find("#errfechaFin").text("");
					}
				})
			},
			buttons: [{
				id: "btnGuardar",
				label: "Guardar",
				cssClass: "btn-primary btn-block btn-lg",
				action: function(dialogItself){
					var ventana = $(".ModalTiempo");
					if (ventana.find('[name="fechaFin"]').val() > ventana.find('[name="fechaInicio"]').val()) {
						$.isLoading({ text: "Cargando..." }); NProgress.start();
						$("#btnGuardar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Guardando');
						inicio = ventana.find('[name="fechaInicio"]').val();
						fin = ventana.find('[name="fechaFin"]').val();
						var tiempo = ventana.find('[name="slTiempo"]').val();
						$.post(
							"{{ URL::route('SysWebVentasConfEnviosProveedoresDepartamentosTiempo') }}",
							{idD: id, tiempo: tiempo, inicio: inicio, fin: fin},
							function(data){
								$.isLoading("hide"); NProgress.done();
								$("#btnGuardar").html("Guardar").prop("disabled", false);
								if(data.success){
									dialogItself.close();
									var table = $("#tblProveedorEP").DataTable();
									table.ajax.reload(null, false);
									new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								}
								else{
									if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								}
							},
							"json"
						);
					}
					
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function Eliminar(id){
		var id = id;
		var mensaje = "<div class='row'> \
							<div class='col-xs-12'> \
								<form id='frmEliminar'> \
									<h2> ¿Seguro que desea eliminar? </h2> \
									<input type='hidden' name='idP' value='"+id+"'> \
								</form> \
							</div> \
						</div>";
		BootstrapDialog.show({
			title: "Eliminar registro",
			type: BootstrapDialog.TYPE_DANGER,
			size: BootstrapDialog.SIZE_NORMAL,
			message: mensaje,
			draggable: true,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnEliminar",
				label: "Eliminar",
				cssClass: "btn-danger btn-block btn-lg",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnEliminar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Eliminando');
					$.post(
						"{{ URL::route('SysWebVentasConfEnviosProveedoresDepartamentosEliminar') }}",
						{idD: id},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnEliminar").html("Eliminar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblProveedorEP").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
							}
						},
						"json"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
	function HabilitarDeshabilitar(id, estado){
		var id = id;
		var titulo = "Habilitar registro";
		var tituloBoton = "Habilitar";
		var mensajeConfirmacion = "¿Seguro que deseas habilitar este departamento?<br><br>Si lo habilitas aparecerá en el proceso de compra de las ventanas y carro";
		if( estado == 1 ){
			titulo = "Deshabilitar registro";
			tituloBoton = "Deshabilitar";
			mensajeConfirmacion = "¿Seguro que deseas deshabilitar este departamento?<br><br>Si lo deshabilitas ya no aparecerá en el proceso de compra de las ventanas y carro";
		}
		var mensaje = "<div class='row'> \
			<div class='col-xs-12'> \
				<form id='frmHabilitarDeshabilitar'> \
					<h2 class='text-center'> "+mensajeConfirmacion+" </h2> \
					<input type='hidden' name='idD' value='"+id+"'> \
				</form> \
			</div> \
		</div>";
		BootstrapDialog.show({
			title: titulo,
			type: BootstrapDialog.TYPE_INFO,
			message: mensaje,
			draggable: true,
			closable: false,
			closeByBackdrop: false,
			cssClass: "ModalEliminar mdAvatar",
			onshown: function(dialogItself){
				$("body").addClass("modal-open");
			},
			buttons: [{
				id: "btnHabilitarDeshabilitar",
				label: tituloBoton,
				cssClass: "btn-info btn-block btn-lg",
				action: function(dialogItself){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnHabilitarDeshabilitar").prop("disabled", true).html('<i class="fa fa-spinner fa-spin"></i> Procesando...');
					$.post(
						"{{ URL::route('SysWebVentasConfEnviosProveedoresDepartamentosHabilitarDeshabilitar', array($Pais->id, 0)) }}",
						{idD: id},
						function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnHabilitarDeshabilitar").html("Guardar").prop("disabled", false);
							if(data.success){
								dialogItself.close();
								var table = $("#tblProveedorEP").DataTable();
								table.ajax.reload(null, false);
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
							}
							else{
								if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
								$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
							}
						},
						"json"
					);
				}
			}],
			onhidden: function(dialogItself){
				$("body").removeClass("modal-open");
			}
		});
	}
</script>
@stop

@section('JSOr')

setTimeout(function(){
	$("#slEstados").selectpicker('deselectAll');
}, 500)
$("#tblProveedorEP").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebVentasConfEnviosProveedoresDepartamentos',  array($Pais->id, $ProveedorEP->id)) }}",
	columns: [
		{data: "nombre", name: "nombre"},
		{data: "rangosPeso", name: "rangosPeso"},
		{data: "rangosPrecio", name: "rangosPrecio"},
		{data: "tiempo", name: "tiempo", class: "text-center",
			"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
				$(nTd).text("")
				var tiempo = (oData.tiempo == "H")?" Horas":" Días";
				var html = "Tiempo de entrega: "+oData.fecha_inicio+" a "+oData.fecha_fin+tiempo
				$(nTd).append(html);
			}
		},
		{data: "acciones", name: "acciones", "searchable": false, "orderable": false, "class": "text-center"}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function(oSettings){
		$(".tooltips").tooltip();
		$("#tblProveedorEP").find(".table").each(function(e){
			var tabla = $(this);
			tabla.DataTable({
				"pageLength": 5,
				"paging": true,
				"ordering": false,
				"info": false,
				"searching": false
			});
			var cBtnVM = tabla.attr("data-botonvm");
			var filasTotales = tabla.DataTable().rows().count();
			console.log( filasTotales );
			if( filasTotales < 6 ){
				$("#tblProveedorEP").find("."+cBtnVM).hide();
			}
			$("#tblProveedorEP").find("."+cBtnVM).click(function(e){
				var boton = $(this);
				var filasVisibles = tabla.find("tbody>tr:visible").length;
				if( filasVisibles == 5 ){
					var i = filasVisibles+99;
					boton.html("Ver menos...");
				}
				else{
					var i = 5;
					boton.html("Ver más...");
				}
				tabla.DataTable().page.len(i).draw();
			});
		});
	},
	autoWidth: false,
	responsive: true
});
$("#frmAgregar").submit(function(e){
	$.isLoading({ text: "Cargando..." }); NProgress.start();
	$("#btnAgregar").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
	e.preventDefault();
	var estados = $("#slEstados").val().filter(Boolean);
	$(".selectpicker").selectpicker("val", estados);
	var frmAgregar = new FormData(document.getElementById("frmAgregar"));
	$.ajax({
		type: "POST",
		url: "{{ URL::route('SysWebVentasConfEnviosProveedoresDepartamentos',  array($Pais->id, $ProveedorEP->id)) }}",
		data: frmAgregar,
		cache: false,
		contentType: false,
		processData: false,
		dataType: "json",
		success: function(data){
			$.isLoading("hide"); NProgress.done();
			$("#btnAgregar").html("Guardar").prop("disabled", false);
			if(data.success){
				new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
				setTimeout( function(){ window.location.reload(); }, 3000 );
			}
			else{
				if(data.mensaje != ''){ new PNotify({ title: "Error", text: data.mensaje, type: "error" }); }
				$.each(data.errMensajes, function(key, value){ if(value != ''){ $("#err"+key).html(value); } else{ $("#err"+key).html(""); } });
			}
		},
		error: function(jqXHR, textStatus, errorThrown){
			new PNotify({ title: "Error", text: textStatus + " " + errorThrown, type: "error" });
		}
	});
});
@stop