@extends('../layouts.app')
<link rel="stylesheet" href="{{ asset('css/preloader.css')}}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('argon/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}">

<style>
	td {
		padding: 0.5rem !important
	}

	.table-details {
		padding: 0 !important;
	}

	[data-toggle=buttons]:not(.btn-group-colors)>.btn.critico.active {
		color: #fff !important;
		background-color: #f5365c !important;
	}

	[data-toggle=buttons]:not(.btn-group-colors)>.btn.neutro.active {
		color: #fff !important;
		background-color: #efca2f !important;
	}

	[data-toggle=buttons]:not(.btn-group-colors)>.btn.receptivel.active {
		color: #fff !important;
		background-color: #2dce89 !important;
	}
</style>
<div id="preloaders" class="preloader"></div>

@section('title', 'CRM')
@section('content')
@include('../layouts.headers.cards_prod')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->

<div class="container-fluid mt--5">
	<div class="row">
		<div class="col-xl-12 order-xl-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-md-8">
							<h3 class="mb-0">{{ __('Relação Vendedor-Cliente') }}</h3>
						</div>
						<div class="col-md-4 text-right">
							<button class="btn btn-sm btn-success" data-toggle="modal" data-target="#ModalCaptacao">Cadastrar Cliente</button>
						</div>
					</div>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-3" id="definir_pagamento">
							<div class="card rounded">
								<!-- Card body -->
								<div class="card-body p-3">
									<div class="row">
										<div class="col-auto mx-auto">
											<div class="icon icon-shape bg-default text-dark rounded-circle shadow">
												<i class="fas fa-user fa-2x text-primary"></i>
											</div>
										</div>
										<div class="col pl-0">
											<div class="row mb-2">
												<h5 class="card-title text-uppercase text-muted mb-0 ml-3">Vendedor</h5>
											</div>
											<span id="filtro-vendedor" class="font-weight-bold mb-0 text-white">
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3" id="definir_pagamento">
							<div class="card rounded">
								<!-- Card body -->
								<div class="card-body p-3">
									<div class="row">
										<div class="col-auto mx-auto">
											<div class="icon icon-shape bg-default text-dark rounded-circle shadow">
												<i class="fas fa-users fa-2x text-primary"></i>
											</div>
										</div>
										<div class="col pl-0">
											<div class="row mb-2">
												<h5 class="card-title text-uppercase text-muted mb-0 ml-3">Cliente</h5>
											</div>
											<span class="font-weight-bold mb-0 text-white">
												<input type="text" class="form-control form-control-sm" id="filtro-cliente" placeholder="Pesquise um cliente">
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3" id="definir_pagamento">
							<div class="card rounded">
								<!-- Card body -->
								<div class="card-body p-3">
									<div class="row">
										<div class="col-auto mx-auto">
											<div class="icon icon-shape bg-default text-dark rounded-circle shadow">
												<i class="fas fa-map-marker-alt fa-2x text-primary"></i>
											</div>
										</div>
										<div class="col pl-0">
											<div class="row mb-2">
												<h5 class="card-title text-uppercase text-muted mb-0 ml-3">Cidade</h5>
											</div>
											<span class="font-weight-bold mb-0 text-white">
												<input type="text" class="form-control form-control-sm" id="filtro-cidade" placeholder="Pesquise uma cidade">
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3" id="definir_pagamento">
							<div class="card rounded">
								<!-- Card body -->
								<div class="card-body p-3">
									<div class="row">
										<div class="col-auto mx-auto">
											<div class="icon icon-shape bg-default text-dark rounded-circle shadow">
												<i class="fas fa-smile fa-2x text-primary"></i>
											</div>
										</div>
										<div class="col pl-0">
											<div class="row mb-2">
												<h5 class="card-title text-uppercase text-muted mb-0 ml-3">Resultado</h5>
											</div>
											<span id="filtro-resultado" class="font-weight-bold mb-0 text-white">
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-flush table-sm table-bordered table-dark w-100" id="table">
							<thead class="thead-dark">
								<tr class="text-center">
									<th>#</th>
									<th>Vendedor</th>
									<th>Cliente</th>
									<th>Celular</th>
									<th>Cidade</th>
									<th>Ult. Contato</th>
									<th>Resultado</th>
									<th>Ações</th>
								</tr>
							</thead>
							<tfoot>
								<tr class="text-center">
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@include('php.modal-crm')
@include('php.modal-cliente-captacao')
<!-- Comentando o navbar horizontal -->
@endsection

@push('js')
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>

<script>
	$('input[type="checkbox"]').change(function() {
		this.value = this.checked ? 1 : 0;
	});
</script>

<script>
	$(document).ready(function() {

		var table = $('#table').DataTable({
			"processing": true,
			"ajax": "{{ route('crm.data')}}",
			"deferRender": true,

			columns: [{
					"class": "align-middle text-center details-control",
					"orderable": false,
					"data": null,
					"defaultContent": '',
					"searchable": false,
					"render": function() {
						return '<i class="far fa-eye" aria-hidden="true"></i>';
					},
					width: "15px"
				},
				{
					data: 'name',
					name: 'name',
					visible: false,
					className: 'align-middle text-center',
				},
				{
					data: 'razao_cliente',
					name: 'razao_cliente',
					className: 'align-middle text-center',
					render: function(data, type, row) {
						data = data.substr(0, 20);
						return data;
					}
				},
				{
					data: 'celular_cliente',
					name: 'celular_cliente',
					visible: false,
					className: 'align-middle text-center',
				},
				{
					data: 'cidade_cliente',
					name: 'cidade_cliente',
					className: 'align-middle text-center',
				},
				{
					data: 'ultimo_contato',
					name: 'ultimo_contato',
					className: 'align-middle text-center',
				},
				{
					"class": "align-middle text-center",
					"defaultContent": '',
					"data": 'resultado',
					"render": function(data, type, row) {

						if (data == 'critico') {
							data = "<i class='font-weight-bold far fa-frown fa-2x text-danger'></i><br><small class='text-danger d-none'>Critico</small>"
						}
						if (data == 'neutro') {
							data = "<i class='font-weight-bold far fa-meh fa-2x text-yellow'></i><br><small class='text-yellow d-none'>Neutro</small>"
						}
						if (data == 'receptivel') {
							data = "<i class='font-weight-bold far fa-smile fa-2x text-success'></i><br><small class='text-success d-none'>Receptivel</small>"
						}

						return data;
					}
				},

				{
					"class": "align-middle text-center",
					"defaultContent": '',
					"data": 'cnpj_cpf_cliente',
					"render": function(data, type, row) {
						return "<button type='button' value='" + data + "' class='btn btn-success btn-qqc' data-toggle='modal' data-target='#CRMModal'" +
							"data-cliente='" + row.razao_cliente + "'" +
							"data-cnpj='" + data + "'" +
							"data-celular='" + row.celular_cliente + "'" +
							"data-cidade='" + row.cidade_cliente + "'" +
							"data-email='" + row.email_cliente + "'" +
							"data-telefone='" + row.telefone_cliente + "'" +
							"'>" +
							"<i class='fas fa-plus'></i></button>";
					}
				}
			],
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},
			dom: 'Bfrtip',
			lengthMenu: [
				[10, 25, 50, -1],
				['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
			],
			buttons: [{
					extend: 'pageLength'
				},
				{
					extend: 'pdfHtml5',
					className: 'btn bg-danger d-none text-white rounded',
					exportOptions: {
						columns: [0, 1, 2, 3, 4, 5]
					}
				},
				{
					extend: 'excelHtml5',
					className: 'btn bg-success d-none text-white rounded',
					exportOptions: {
						columns: [0, 1, 2, 3, 4, 5]
					}
				},
				{
					extend: 'colvis',
					text: 'Colunas',
					className: 'btn bg-default text-white rounded'
				}
			],

			initComplete: function() {
				this.api().columns([1]).every(function() {
					var column = this;
					var select = $('<select class="form-control form-control-sm w-100"><option value="">Selecione um Vendedor</option></select>')
						.appendTo($('#filtro-vendedor'))
						.on('change', function() {
							var val = $.fn.dataTable.util.escapeRegex(
								$(this).val()
							);

							column
								.search(val ? '^' + val + '$' : '', true, false)
								.draw();
						});

					column.data().unique().sort().each(function(d, j) {
						select.append(
							'<option value="' + d + '">' + d + "</option>"
						);
					});
				});
				this.api().columns([6]).every(function() {
					var column = this;
					var select = $('<select class="form-control form-control-sm w-100"><option value="">Selecione um Resultado</option></select>')
						.appendTo($('#filtro-resultado'))
						.on('change', function() {
							var val = $.fn.dataTable.util.escapeRegex(
								$(this).val()
							);

							column
								.search(val ? '^' + val + '$' : '', true, false)
								.draw();
						});

					column.data().unique().sort().each(function(d, j) {
						select.append(
							'<option value="' + d + '">' + d + "</option>"
						);
					});
				});
			},
			stateSave: true
		});

		table.columns([2]).every(function() {
			var that = this;

			$('#filtro-cliente').on('keyup change clear', function() {
				if (that.search() !== this.value) {
					that
						.search(this.value)
						.draw();
				}
			});
		});

		var state = table.state.loaded();
		if (state) {
			table.columns().each(function() {
				var colSearch = state.columns[2].search;

				if (colSearch.search) {
					$('#filtro-cliente').val(colSearch.search);
				}
			});

			table.draw();
		}

		table.columns([4]).every(function() {
			var that = this;

			$('#filtro-cidade').on('keyup change clear', function() {
				if (that.search() !== this.value) {
					that
						.search(this.value)
						.draw();
				}
			});
		});

		var state = table.state.loaded();
		if (state) {
			table.columns().each(function() {
				var colSearch = state.columns[4].search;

				if (colSearch.search) {
					$('#filtro-cidade').val(colSearch.search);
				}
			});

			table.draw();
		}

		// Array to track the ids of the details displayed rows
		$('#table tbody').on('click', 'td.details-control', function() {
			var tr = $(this).closest('tr');
			var tdi = tr.find("i.far");
			var row = table.row(tr);

			if (row.child.isShown()) {
				// This row is already open - close it
				row.child.hide();
				tr.removeClass('shown');
				tdi.first().removeClass('fa-eye-slash');
				tdi.first().addClass('fa-eye');
			} else {
				// Open this row
				row.child(format(row.data())).show();
				tr.addClass('shown');
				tdi.first().removeClass('fa-eye');
				tdi.first().addClass('fa-eye-slash');
			}
		});

		table.on("user-select", function(e, dt, type, cell, originalEvent) {
			if ($(cell.node()).hasClass("details-control")) {
				e.preventDefault();
			}
		});
	});

	function format(d) {
		// `d` is the original data object for the row
		return '<table class="table-sm table-details" cellpadding="5" cellspacing="0" border="0">' +
			'<tbody class="thead-dark">' +
			'<tr>' +
			'<th class="align-middle text-center">CNPJ/CPF:</th>' +
			'<td class="align-middle text-center" colspan="2">' + d.cnpj_cpf_cliente + '</td>' +
			'</tr>' +
			'<tr>' +
			'<th class="align-middle text-center">Email:</th>' +
			'<td class="align-middle text-center" colspan="2">' + d.email_cliente + '</td>' +
			'</tr>' +
			'<tr>' +
			'<th class="align-middle text-center" >Limite de Credito:</th>' +
			'<td class="align-middle text-center" colspan="2">' + d.limite_credito_cliente + '</td>' +
			'</tr>' +
			'</tbody>' +
			'</table>';
	}
</script>

<script>
	//código usando jQuery
	$(document).ready(function() {
		$('.preloader').hide();
	});
</script>

<script>
	$('#CRMModal').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		var cliente = button.data('cliente')
		var cnpj = button.data('cnpj')
		var celular = button.data('celular')
		var email = button.data('email')
		var telefone = button.data('telefone')
		var cidade = button.data('cidade')

		var modal = $(this)
		modal.find('.modal-body #descricao_telemarketing').val('');
		modal.find('.modal-body #retorno_cliente').val('');
		modal.find('.modal-body #nome_cliente').val(cliente)
		modal.find('.modal-body #cliente_telemarketing').val(cnpj)
		modal.find('.modal-body #cidade_cliente').val(cidade)

		modal.find('.modal-body #celular_cliente').val(celular)
		modal.find('.modal-body #telefone_cliente').val(telefone)
		modal.find('.modal-body #email_cliente').val(email)
		modal.find('#celular_coordenador').val(celular)
		modal.find('#telefone_coordenador').val(telefone)
		modal.find('#email_coordenador').val(email)
		modal.find('#cliente_coordenador').val(cnpj)

	});
</script>

<script>
	$(document).ready(function() {
		$('.datepicker').datepicker({
			todayBtn: 'linked',
			format: 'yyyy-mm-dd',
			language: "pt-BR",
			autoclose: true
		});
	});
</script>

<script>
	$(document).on('click', '.btn-qqc', function() {
		$('#consulta_telemarketing').children().remove();
		let valor = $(this).val();
		let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$.ajax({
			url: "/crm/data_telemarketing/" + valor,
			method: 'post',
			dataType: 'json',
			data: {
				_token: CSRF_TOKEN,
				id: valor
			},
			timeout: 5000,
			success: function(retorno) {

				for (let x = 0; x < retorno.success.length; x++) {
					if (retorno.success[x].canal_telemarketing == "Ligação") {
						retorno.success[x].canal_telemarketing = "<i class='fas fa-phone'></i>";
					}
					if (retorno.success[x].canal_telemarketing == "Whatsapp") {
						retorno.success[x].canal_telemarketing = "<i class='fab fa-whatsapp'></i>";
					}
					if (retorno.success[x].canal_telemarketing == "Email") {
						retorno.success[x].canal_telemarketing = "<i class='fas fa-envelope'></i>";
					}
					if (retorno.success[x].resultado_telemarketing == "critico") {
						retorno.success[x].resultado_telemarketing = "<i class='far fa-frown text-danger pt-1'></i>";
					}
					if (retorno.success[x].resultado_telemarketing == "neutro") {
						retorno.success[x].resultado_telemarketing = "<i class='far fa-meh text-yellow pt-1'></i>";
					}
					if (retorno.success[x].resultado_telemarketing == null) {
						retorno.success[x].resultado_telemarketing = "<i class='far fa-meh text-yellow pt-1'></i>";
					}
					if (retorno.success[x].resultado_telemarketing == "receptivel") {
						retorno.success[x].resultado_telemarketing = "<i class='far fa-smile text-success pt-1'></i>";
					}

					$('#consulta_telemarketing').append("<tr class='text-center border-top-5'><td>" +
						retorno.success[x].nome_vendedor + "</td><td>" +
						retorno.success[x].canal_telemarketing + "</td><td>" +
						retorno.success[x].assunto_telemarketing + "</td><td style=' white-space: pre-wrap;'>" +
						retorno.success[x].resultado_telemarketing + "</td><td>" +
						retorno.success[x].date_telemarketing + "</td></tr><tr><td colspan='5'>OBS: " +
						retorno.success[x].descricao_telemarketing + "</td></tr>");
				}
			},
			error: function() {
				alert('Dados não enviados');
			}
		})
	});
</script>

<script>
	$(document).on('change', '#cep_cliente', function() {
		let cep = $(this).val();
		let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$.ajax({
			url: "/clientes_reman/cep/" + cep,
			method: 'post',
			dataType: 'json',
			data: {
				_token: CSRF_TOKEN,
				id: cep
			},
			timeout: 5000,
			success: function(retorno) {
				$('#logradouro').val(retorno.logradouro);
				$('#bairro').val(retorno.bairro);
				$('#cidade').val(retorno.localidade);
				$('#option_uf').val(retorno.uf);
				$('#option_uf').text(retorno.uf);
				$('#option_uf').attr('selected', 'selected');
				$('#codigo_cidade_cliente').val(retorno.ibge);
			},
			error: function() {
				alert('Cep não encontrado...');
			}
		});
	});
</script>

<script>
	$('#ModalCaptacao').on('show.bs.modal', function(event) {
		$('#logradouro').val('');
		$('#cep_cliente').val('');
		$('#bairro').val('');
		$('#cidade').val('');
		$('#codigo_cidade_cliente').val('');
		$('#cpf_cadastro').val("CAP" + Math.floor(Math.random() * 999999))
	});
</script>
@endpush