File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/experiences/monitor/list.blade.php
@extends('modules.head')
@section('contenido')
<style>
/* Ensure that the demo table scrolls */
/* th, */
td {
white-space: nowrap;
}
div.dataTables_wrapper {
height: fit-content;
margin: 0px 10px 0px 10px;
}
.dataTables_scrollBody {
max-height: none !important;
}
</style>
@php
$page_prefix = "experience_monitor";
@endphp
<div class="box-header">
<a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
<i class="fa fa-file-excel-o"></i> {{ Lang::get('experiences.monitor.export_data') }}
</a>
</div>
<!-- List experience monitor -->
<div class="box">
<div class="box-header">
<h3 class="box-title"><b>{{ Lang::get('experiences.monitor.filters') }}</b></h3>
<div class="row">
<div class="col-3 col-md-3">
<label for="states">{{ Lang::get('experiences.monitor.filter_state')}}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('experiences.monitor.placeholder_select') }}" name="states" value="" required>
@foreach ($states as $state)
<option value="{{ $state }}">{{ $state }}</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="experiences">{{ Lang::get('experiences.monitor.filter_experiences')}}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('experiences.monitor.placeholder_select') }}" name="experiences" value="" required>
@foreach ($experiences as $experience)
<option value="{{ $experience->id }}">{{ $experience->name }}</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="startPayment">{{ Lang::get('experiences.monitor.filter_payment_start_date')}}</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" placeholder="{{ Lang::get('experiences.monitor.placeholder_date') }}" name="startPayment" value="" autocomplete="off">
</div>
</div>
<div class="col-3 col-md-3">
<label for="endPayment">{{ Lang::get('experiences.monitor.filter_payment_end_date')}}</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" placeholder="{{ Lang::get('experiences.monitor.placeholder_date') }}" name="endPayment" value="" autocomplete="off">
</div>
</div>
</div>
<p style="margin-top: 10px; border-bottom: 1px solid #D3D3D3;"></p>
<h3 class="box-title"><b>{{ Lang::get('experiences.monitor.title') }}</b></h3>
</div>
<!-- /.box-header -->
<table id="{{$page_prefix}}" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="{{$page_prefix}}_info"></table>
<!-- /.box-body -->
</div>
@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/util.js') . '?v=' . time() }}"></script>
<script type="text/javascript">
const SELECTOR_PREFIX = "{{$page_prefix}}";
$(document).ready(function() {
validateLocalStoreInformation();
getData();
$('.select2').select2();
$.fn.datepicker.dates['en'] = {
days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
daysShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre'
],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
today: "Hoy",
clear: "Clear",
format: "yyyy-mm-dd",
titleFormat: "MM yyyy",
weekStart: 0
};
$("input[name='startPayment']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("input[name='endPayment']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("select[name='states']").on('change', function() {
getData();
});
$("select[name='experiences']").on('change', function() {
getData();
});
let startPayment;
$("input[name='startPayment']").on('change', function(event) {
if ((this.value && startPayment != this.value) || (!this.value && startPayment)) {
startPayment = this.value;
getData();
} else {
filterData("filterStartPayment", this.value);
}
});
let endPayment;
$("input[name='endPayment']").on('change', function() {
if ((this.value && endPayment != this.value) || (!this.value && endPayment)) {
endPayment = this.value;
getData();
} else {
filterData("filterEndPayment", this.value);
}
});
});
function getData() {
let states = $("select[name='states']").val();
let experiences = $("select[name='experiences']").val();
let startPayment = $("input[name='startPayment']").val();
let endPayment = $("input[name='endPayment']").val();
filterData("filterStates", states);
filterData("filterExperiences", experiences);
filterData("filterStartPayment", startPayment);
filterData("filterEndPayment", endPayment);
if ($(`#${SELECTOR_PREFIX}`).html()) {
$(`#${SELECTOR_PREFIX}`).DataTable().destroy();
}
var experienceType = <?php echo json_encode($experience_type); ?>;
let fixedColumns = false;
let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobileDevice) {
fixedColumns = {
left: 1,
right: 2
};
}
$(`#${SELECTOR_PREFIX}`).DataTable({
responsive: true,
processing: true,
serverSide: true,
language: {
url: window.DATATABLES_LANGUAGE_URL,
},
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: fixedColumns,
ajax: {
url: "{{ route('experience_monitor.table') }}",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: "POST",
data: {
experienceType: experienceType,
states: states,
experiences: experiences,
startPayment: startPayment,
endPayment: endPayment
}
},
columns: [{
data: 'payment_identifier',
name: 'experience_payments.payment_identifier',
title: Lang.get('experiences.monitor.datatables.columns.payment_identifier'),
},
{
data: 'amount',
name: 'experience_payments.amount',
title: Lang.get('experiences.monitor.datatables.columns.paid_slots'),
},
{
data: 'raffle',
name: 'experience_payments.raffle',
title: Lang.get('experiences.monitor.datatables.columns.raffle'),
},
{
data: 'referral_code',
name: 'experience_payments.referral_code',
title: Lang.get('experiences.monitor.datatables.columns.referral_code'),
},
{
data: 'first_name',
render: function(data, type, row) {
return row.first_name ? (row.first_name ?? '' + ' ' + row.last_name ?? '').trim() : '';
},
name: 'experience_users.first_name' || 'experience_users.last_name',
title: Lang.get('experiences.monitor.datatables.columns.name'),
},
{
data: 'document_type',
name: 'document_types.name',
title: Lang.get('experiences.monitor.datatables.columns.document_type'),
},
{
data: 'document',
name: 'experience_users.document',
title: Lang.get('experiences.monitor.datatables.columns.document'),
},
{
data: 'email',
name: 'experience_users.email',
title: Lang.get('experiences.monitor.datatables.columns.email'),
},
{
data: 'phone',
name: 'experience_users.phone',
title: Lang.get('experiences.monitor.datatables.columns.phone'),
},
{
data: 'birthdate',
name: 'experience_users.birthdate',
title: Lang.get('experiences.monitor.datatables.columns.birthdate'),
},
{
data: 'guardian_first_name',
render: function(data, type, row) {
return row.guardian_first_name ? (row.guardian_first_name ?? '' + ' ' + row.guardian_last_name ?? '').trim() : '';
},
name: 'experience_users.guardian_first_name' || 'experience_users.guardian_last_name',
title: Lang.get('experiences.monitor.datatables.columns.guardian_name'),
},
{
data: 'guardian_document',
name: 'experience_users.guardian_document',
title: Lang.get('experiences.monitor.datatables.columns.guardian_document'),
},
{
data: 'guardian_email',
name: 'experience_users.guardian_email',
title: Lang.get('experiences.monitor.datatables.columns.guardian_email'),
},
{
data: 'guardian_phone',
name: 'experience_users.guardian_phone',
title: Lang.get('experiences.monitor.datatables.columns.guardian_phone'),
},
{
data: 'billing_first_name',
render: function(data, type, row) {
return row.billing_first_name ? (row.billing_first_name ?? '' + ' ' + row.billing_last_name ?? '').trim() : '';
},
name: 'experience_payments.billing_first_name' || 'experience_payments.billing_last_name',
title: Lang.get('experiences.monitor.datatables.columns.billing_first_name'),
},
{
data: 'billing_document_type',
name: 'billing_document_type.name',
title: Lang.get('experiences.monitor.datatables.columns.billing_document_type'),
},
{
data: 'billing_document',
name: 'experience_payments.billing_document',
title: Lang.get('experiences.monitor.datatables.columns.billing_document'),
},
{
data: 'billing_email',
name: 'experience_payments.billing_email',
title: Lang.get('experiences.monitor.datatables.columns.billing_email'),
},
{
data: 'billing_phone',
name: 'experience_payments.billing_phone',
title: Lang.get('experiences.monitor.datatables.columns.billing_phone'),
},
{
data: 'billing_address',
name: 'addresses.direction',
title: Lang.get('experiences.monitor.datatables.columns.billing_address'),
},
{
data: 'experience',
name: 'experiences.name',
title: Lang.get('experiences.monitor.datatables.columns.experience'),
},
{
data: 'experience_plan',
name: 'experience_plans.name',
title: Lang.get('experiences.monitor.datatables.columns.experience_plan'),
},
{
data: 'experience_date',
name: 'experience_payments.payment_due_date',
title: Lang.get('experiences.monitor.datatables.columns.experience_date'),
},
{
data: 'experience_expires_at',
name: 'experience_payments.expires_at',
title: Lang.get('experiences.monitor.datatables.columns.experience_expires_at'),
},
{
data: 'experience_status',
name: 'experience_payments.status',
title: Lang.get('experiences.monitor.datatables.columns.experience_status'),
},
{
data: 'payment_state',
name: 'payment_transactions.state',
title: Lang.get('experiences.monitor.datatables.columns.payment_state'),
},
{
data: 'payment_total',
render: function(data, type, row) {
return formatCurrency(row.payment_total);
},
name: 'experience_payments.total',
title: Lang.get('experiences.monitor.datatables.columns.payment_total'),
},
{
data: 'payment_reference',
name: 'payment_transactions.reference',
title: Lang.get('experiences.monitor.datatables.columns.payment_reference'),
},
{
data: 'payment_transaction',
name: 'payment_transactions.gateway_transaction_id',
title: Lang.get('experiences.monitor.datatables.columns.payment_transaction'),
},
{
data: 'payment_date',
name: 'payment_transactions.payment_date',
title: Lang.get('experiences.monitor.datatables.columns.payment_date'),
},
{
data: 'actions',
name: 'actions',
title: Lang.get('experiences.monitor.datatables.columns.actions'),
orderable: false,
searchable: false,
},
]
});
}
function clickExportAll() {
$('#loading').show();
_table = $(`#${SELECTOR_PREFIX}`).DataTable();
let query = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].query;
let bindings = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].bindings;
query = query.split(' limit ')[0];
var validateDownloadUrl = document.location.origin + "/experience_monitor/validateExport";
var downloadUrl = document.location.origin + "/experience_monitor/export/";
var formData = new FormData();
formData.append("query", query);
formData.append("bindings", bindings);
$.ajax({
type: "POST",
dataType: "json",
processData: false,
contentType: false,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
data: formData,
url: validateDownloadUrl,
success: function(response) {
$('#loading').hide();
if (response.success) {
window.location.assign(downloadUrl + response.data);
} else {
swal("Error", response.message, "error");
}
},
error: function(response) {
$('#loading').hide();
swal("Error", response.responseJSON ? response.responseJSON.message :
'Hubo un error en el servidor, espere unos segundos e intente de nuevo', "error");
}
});
}
// Paginacion inicial
var URLactual = window.location.href;
document.addEventListener('click', function(e) {
if (e.target.closest('a')) {
var href = e.target.closest('a').href || '';
href = href.split('#')[0];
if (URLactual != href) {
// Removemos los localStorage
localStorage.removeItem("filterStates");
localStorage.removeItem("filterExperiences");
localStorage.removeItem("filterStartPayment");
localStorage.removeItem("filterEndPayment");
}
}
}, false);
function filterData(setKey, filter) {
localStorage.setItem(setKey, filter);
}
function validateLocalStoreInformation() {
states = localStorage.getItem("filterStates");
experiences = localStorage.getItem("filterExperiences");
startPayment = localStorage.getItem("filterStartPayment");
endPayment = localStorage.getItem("filterEndPayment");
$("select[name='states']").val(states);
$("select[name='experiences']").val(experiences);
$("input[name='startPayment']").val(startPayment);
$("input[name='endPayment']").val(endPayment);
}
function validatePayments() {
$.ajax({
url: "/validatePayments",
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function(r) {
swal(r.m, {
icon: "success",
buttons: {
Ok: true,
},
}).then((val) => {
if (val == "Ok") {
localStorage.setItem("setPageTable", true);
$(location).attr("href", "/experience_monitor");
}
});
}
});
}
// function clickValidatePay(id) {
// swal(Lang.get("messagesClient.academy_payments.confirm_payment"), {
// buttons: {
// cancel: "No",
// Ok: true,
// },
// }).then((val) => {
// if (val == "Ok") {
// $('#loading').show();
// var info = {
// id: id,
// state: 'CONFIRMED',
// };
// $.ajax({
// url: "/experience_monitor/validatePay",
// type: "PUT",
// contentType: "application/json",
// headers: {
// "X-CSRF-TOKEN": $(
// 'meta[name="csrf-token"]'
// ).attr("content"),
// "Content-Type": "application/json",
// },
// data: JSON.stringify(info),
// success: function(r) {
// $('#loading').hide();
// if (r.r) {
// swal(r.m, {
// icon: "success",
// buttons: {
// Ok: true,
// },
// }).then((val) => {
// if (val == "Ok") {
// localStorage.setItem("setPageTable", true);
// $(location).attr("href", "/experience_monitor");
// }
// });
// } else {
// swal("Error", r.m, "error");
// }
// },
// error: function(e) {
// $('#loading').hide();
// swal("Error", Lang.get("messagesClient.academy_payments.error_confirm_payment"), "error");
// },
// });
// }
// });
// }
function clickValidatePaymentInGateway(id) {
$.ajax({
url: "/experience_monitor/validatePayment/" + id,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function(r) {
swal(r.m, {
icon: "success",
buttons: {
Ok: true,
},
}).then((val) => {
if (val == "Ok") {
localStorage.setItem("setPageTable", true);
$(location).attr("href", "/experience_monitor");
}
});
}
});
}
</script>