@extends('BaseSistemaWeb')

@section('CSS')
{{ HTML::style('DataTables/dataTables.bootstrap.min.css') }}
{{ HTML::style('DataTables/responsive.dataTables.min.css') }}
{{ HTML::style('WebPro/plugins/dropzone/dropzone.css') }}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/ezdz@0.4.3/src/jquery.ezdz.css">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" /> 
<style type="text/css">
	@media (max-width: 450px) { .ModalEliminar .modal-dialog { width: auto; } }
	@media (min-width: 451px) { .ModalEliminar .modal-dialog { width: 450px; } }
	.ezdz-dropzone {
		width: 150px !important;
		height: 150px !important;
		display: inline-block;
		margin-right: 3%;
	}
	.ezdz-dropzone div {
		/*line-height: 526%;*/
		line-height: normal !important;
		padding-top: 30%;
	}
</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><!--/col-md-12-->
</div><!--/row-->

<div class="row">
	<div class="col-md-12">
		@if (Session::has('message'))
		<div class="alert alert-info">{{ Session::get('message') }}</div>
		@endif
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="block-web">
			<div class="header">
				<h3 class="content-header">
					Seguimiento del pedido <strong>{{ $Pedido->tco_order_number }}</strong> comprado por <strong> {{ $Pedido->correo_electronico_comprador }} </strong>
					<div data-toggle="buttons" class="button-group pull-right">
						<a class="refresh tooltips" data-toggle="tooltip" data-original-title="Actualizar registros" onclick="Actualizar()" href="javascript:Actualizar()" style="color: rgba(0, 0, 0, 0.3)">
							<i class="fa fa-repeat"> </i>
						</a>
					</div>
				</h3>
			</div>
			<div class="porlets-content">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover" id="tblSeguimientos">
						<thead>
							<tr>
								<th class=""> Fecha </th>
								<th style=""> Comentario </th>
								<th style=""> Típo de comentario </th>
								<th style=""> Archivos adjuntos </th>
							</tr>
						</thead>
						</table>
				</div>
			</div>
			<div class="bottom">
				<a href="{{ URL::route('SysWebVentasRealizadasSeguimientosAgregar', array($Pedido->id)) }}" class="btn btn-primary" id="btnAgregar"> Agregar </a>
				<a href="{{ URL::route('SysWebVentasRealizadas') }}" class="btn btn-default"> Regresar </a>
			</div>
		</div>
	</div>
</div><!--/row end-->
@stop

@section('JS')
{{ HTML::script('DataTables/jquery.dataTables.min.js') }}
{{ HTML::script('DataTables/dataTables.bootstrap.min.js') }}
{{ HTML::script('DataTables/dataTables.responsive.min.js') }}
{{ HTML::script('WebPro/plugins/dropzone/dropzone.min.js') }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ezdz@0.4.3/src/jquery.ezdz.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/localization/messages_es.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery-all.min.js"></script>
<script type="text/javascript">
	function Actualizar(){
		var table = $("#tblSeguimientos").DataTable();
		table.ajax.reload(null, false);
	}
</script>
@stop

@section('JSOr')
@if( Agent::isDesktop() )
$(".sidebar-toggle-box").trigger("click");
@endif
$("a[data-toggle=\"tab\"]").on("shown.bs.tab", function(e){
	$.fn.dataTable.tables({
		visible: true,
		api: true
	}).columns.adjust();
});
$("#tblSeguimientos").DataTable({
	"processing": true,
	"serverSide": true,
	"ajax": "{{ URL::route('SysWebVentasRealizadasSeguimientos', array($Pedido->id)) }}",
	preDrawCallback: function (settings) { $.isLoading("hide"); },
	columns: [
		{data: "fecha", name: "fecha", "orderable": false},
		{data: "comentario", name: "comentario", "orderable": false},
		{data: "tipo", name: "tipo", "searchable": false, "orderable": false},
		{data: "multimedia", name: "multimedia", "class": "text-center", "searchable": false, "orderable": false}
	],
	"language": {
		"url": "{{ asset('DataTables/Spanish.json') }}"
	},
	"fnDrawCallback": function( oSettings ) {
		$(".tooltips").tooltip();
		$(".dvLightgallery").lightGallery();
	},
	autoWidth: false,
	responsive: true,
	//initComplete: function(){
	//	var input = $(".dataTables_filter input").unbind(),
	//	self = this.api(),
	//	$searchButton = $('<button class="btn btn-primary tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Buscar">').html('<i class="fa fa-search"></i>').click(function(){
	//		self.search(input.val().trim()).draw();
	//	}),
	//	$clearButton = $('<button class="btn btn-default tooltips" style="margin-left: 5px;" data-toggle="tooltip" data-original-title="Limpiar">').html('<i class="fa fa-paint-brush"></i>').click(function(){
	//		input.val('');
	//		$searchButton.click(); 
	//	});
	//	$(".dataTables_filter").append($searchButton, $clearButton);
	//	$("body").tooltip({selector: "[data-toggle='tooltip']"});
	//}
}).on("processing.dt", function(e, settings, processing) {
	if (processing) {
		$.isLoading();
	}
	else{
		$.isLoading("hide");
		window.scrollTo(0, 0);
	}
});
$("#btnAgregar").click(function(e){
	e.preventDefault();
	var idP = "{{ $Pedido->id }}";
	var mensaje = '<div class="row"> \
		<div class="col-xs-12 col-sm-12 col-md-12"> \
			<form action="{{ URL::route('SysWebVentasRealizadasSeguimientosAgregar', array($Pedido->id)) }}" id="frmAgregarSeguimiento" accept-charset="UTF-8" enctype="multipart/form-data" method="POST"> \
				<div class="form-group"> \
					<label for="comentario">Escriba su comentario acá</label> \
					<textarea class="form-control" id="comentario" name="comentario" rows="6" style="resize: none;"></textarea> \
				</div> \
				<div class="form-group text-center"> \
					<label for="multimedia">Subir multimedia</label> \
					<br> \
					<input type="file" name="multimedia[]" class="flInput" style="border: unset; margin-bottom: 10px;" accept="image/png, image/jpeg, video/mp4, application/pdf, application/msword"> \
					<input type="file" name="multimedia[]" class="flInput" style="border: unset; margin-bottom: 10px;" accept="image/png, image/jpeg, video/mp4, application/pdf, application/msword"> \
					<input type="file" name="multimedia[]" class="flInput" style="border: unset; margin-bottom: 10px;" accept="image/png, image/jpeg, video/mp4, application/pdf, application/msword"> \
				</div> \
			</form> \
		</div> \
	</div>';
	BootstrapDialog.show({
		cssClass: "mdAvatar",
		title: "Enviar comentario de seguimiento de pedido",
		message: mensaje,
		draggable: true,
		buttons: [{
			id: "btnAgregarComentario",
			label: "Comentar",
			cssClass: "btn-primary",
			action: function(dialogItself){
				if( dialogItself.getModalBody().find("#frmAgregarSeguimiento").valid() ){
					$.isLoading({ text: "Cargando..." }); NProgress.start();
					$("#btnAgregarComentario").html('<i class="fa fa-spinner fa-spin"></i> Cargando').prop("disabled", true);
					var frmAgregarSeguimiento = new FormData(document.getElementById("frmAgregarSeguimiento"));
					$.ajax({
						type: "POST",
						url: "{{ URL::route('SysWebVentasRealizadasSeguimientosAgregar', array($Pedido->id)) }}",
						data: frmAgregarSeguimiento,
						cache: false,
						contentType: false,
						processData: false,
						dataType: "json",
						success: function(data){
							$.isLoading("hide"); NProgress.done();
							$("#btnAgregarComentario").html("Comentar").prop("disabled", false);
							if(data.success){
								new PNotify({ title: "Realizado", text: data.mensaje, type: "success" });
								dialogItself.close();
								Actualizar();
							}
							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" });
						}
					});
				}
			}
		}],
		onshown: function(dialogItself){
			if( !($.ezdz.isBrowserCompatible() === false) ){
				dialogItself.getModalBody().find(".flInput").each(function(e){
					$(this).ezdz({
						text: "Arrastra el archivo",
						validators: {
							maxSize: 6000000
						},
						previewImage: false
					});
				});
			}
			dialogItself.getModalBody().find("#frmAgregarSeguimiento").validate({
				lang: "es",
				errorClass: "text-danger",
				errorElement: "span",
				rules: {
					comentario: "required",
					"multimedia[]": {
						accept: "image/png, image/jpeg, video/mp4, application/pdf, application/msword"
					}
				}
			});
		},
	});
});
@if(Session::has('EliminarMensajeS'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeS') }}", type: "success" });
@endif
@if(Session::has('EliminarMensajeE'))
new PNotify({ title: "Realizado", text: "{{ Session::get('EliminarMensajeE') }}", type: "error" });
@endif
@stop