File: /var/www/vhost/disk-apps/comfama.sports-crowd.com/resources/views/memberships/dashboard.blade.php
@extends('modules.head')
@section('contenido')
<style>
td {
white-space: nowrap;
}
div.dataTables_wrapper {
height: fit-content;
margin: 0px 10px 0px 10px;
}
.dataTables_scrollBody {
max-height: none !important;
}
.scroll-ul {
height: 140px;
overflow: scroll;
overflow-x: hidden;
}
</style>
@php
$page_prefix = "memberships";
@endphp
<div class="box-header">
<a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
<i class="fa fa-file-excel-o"></i> {{ __('memberships.texts.export') }}
</a>
</div>
<!-- List Data -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">{{__('memberships.texts.memberships')}}</h3>
</div>
<!-- filters -->
<div class="box-body">
<div class="col-3 col-md-3">
<label for="states">{{ __('memberships.labels.membership_status') }}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ __('memberships.defaults.placeholder_select') }}" name="states" value="" required>
<option value="">{{ __('memberships.defaults.placeholder_select') }}</option>
<option value="CONFIRMED">CONFIRMED</option>
<option value="PENDING">PENDING</option>
<option value="EXPIRED">EXPIRED</option>
</select>
</div>
<div class="col-3 col-md-3">
<label for="is_renewal">{{ __('memberships.labels.is_renewal') }}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ __('memberships.defaults.placeholder_select') }}" name="is_renewal" value="" required>
<option value="">{{ __('memberships.defaults.placeholder_select') }}</option>
<option value="0">Nueva</option>
<option value="1">Renovación</option>
</select>
</div>
<div class="col-3 col-md-3">
<div class="form-group">
<label for="start_date">{{ __('memberships.labels.start_date') }}</label>
<input type="date" class="form-control" id="start_date" name="start_date" value="">
</div>
</div>
<div class="col-3 col-md-3">
<div class="form-group">
<label for="end_date">{{ __('memberships.labels.end_date') }}</label>
<input type="date" class="form-control" id="end_date" name="end_date" value="">
</div>
</div>
</div>
<!-- filters -->
<!-- /.box-header -->
<div class="box-body table-responsive ">
<table id="{{$page_prefix}}" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="{{$page_prefix}}_info"></table>
</div>
<!-- /.box-body -->
</div>
@endsection
@section('inline-js')
<script src="{{ asset('js/datetimepicker/moment.min.js') }}"></script>
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
const SELECTOR_PREFIX = "{{$page_prefix}}";
$(document).ready(function() {
$('.select2').select2();
$("select[name='states']").on('change', function() {
$(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
getData();
});
$("select[name='is_renewal']").on('change', function() {
$(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
getData();
});
$('#start_date').on('change', function() {
$(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
getData();
});
$('#end_date').on('change', function() {
$(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
getData();
});
const getData = function() {
$(`#${SELECTOR_PREFIX}`).DataTable({
stateSave: true,
stateSaveCallback: function(settings,data) {
localStore(`DataTables_${SELECTOR_PREFIX}`, data)
},
stateLoadCallback: function(settings) {
return localRetrieve(`DataTables_${SELECTOR_PREFIX}` )
},
responsive: true,
processing: true,
serverSide: true,
"language": {
url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
},
ajax: {
url: '/memberships/dashboard',
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
},
type: "POST",
data: {
states: $('select[name="states"]').val(),
is_renewal: $('select[name="is_renewal"]').val(),
start_date: $('#start_date').val(),
end_date: $('#end_date').val()
},
dataSrc: function (json) {
var totalRows = json.total;
json.recordsTotal = totalRows;
json.recordsFiltered = totalRows;
return json.data;
}
},
columns: [
{
name: 'users.document',
data: 'users.document',
title: Lang.get('memberships.datatables.columns.document'),
render: function ( data, type, row, meta ) {
return [
row.document,
].join('');
}
},
{
name: 'users.name',
data: 'users.name',
title: Lang.get('memberships.datatables.columns.user'),
render: function ( data, type, row, meta ) {
return [
row.first_name,
' ',
row.last_name,
].join('');
}
},
{
name: 'memberships.name',
data: 'memberships.name',
title: Lang.get('memberships.datatables.columns.membership'),
render: function ( data, type, row, meta ) {
return [
row.name,
].join('');
}
},
{
name: 'membership_subscribers.start_date',
data: 'membership_subscribers.start_date',
title: Lang.get('memberships.datatables.columns.start_date'),
render: function ( data, type, row, meta ) {
return [
moment(row.start_date).format('YYYY-MM-DD'),
].join('');
}
},
{
name: 'membership_subscribers.end_date',
data: 'membership_subscribers.end_date',
title: Lang.get('memberships.datatables.columns.end_date'),
render: function ( data, type, row, meta ) {
return [
moment(row.end_date).format('YYYY-MM-DD'),
].join('');
}
},
{
name: 'membership_subscribers.is_renewal',
data: 'membership_subscribers.is_renewal',
title: Lang.get('memberships.datatables.columns.is_renewal'),
render: function ( data, type, row, meta ) {
return [
isRenewal(row),
].join('');
}
},
{
name: 'payment_transactions.status',
data: 'payment_transactions.status',
title: Lang.get('memberships.datatables.columns.membership_status'),
render: function ( data, type, row, meta ) {
return [
transactionStatus(row.status),
].join('');
}
},
{
name: 'payment_transactions.state',
data: 'payment_transactions.state',
title: Lang.get('memberships.datatables.columns.payment_status'),
render: function ( data, type, row, meta ) {
return [
paymentStatus(row.state),
].join('');
}
},
{
name: 'membership_subscribers.price',
data: 'membership_subscribers.price',
title: Lang.get('memberships.datatables.columns.price'),
render: function ( data, type, row, meta ) {
return [
new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' }).format(row.price),
].join('');
}
},
{
name: 'payment_transactions.reference',
data: 'payment_transactions.reference',
title: Lang.get('memberships.datatables.columns.payment_reference'),
render: function ( data, type, row, meta ) {
return [
row.reference,
].join('');
}
},
{
name: 'payment_transactions.gateway_transaction_id',
data: 'payment_transactions.gateway_transaction_id',
title: Lang.get('memberships.datatables.columns.payment_transaction_id'),
render: function ( data, type, row, meta ) {
return [
row.gateway_transaction_id,
].join('');
}
},
{
name: 'membership_subscribers.created_at',
data: 'membership_subscribers.created_at',
title: Lang.get('memberships.datatables.columns.created_at'),
render: function ( data, type, row, meta ) {
return [
moment(row.created_at).format('YYYY-MM-DD HH:mm:ss'),
].join('');
}
},
{
width: '10%',
name:'actions',
data:'actions',
title: Lang.get('memberships.datatables.columns.actions'),
orderable: false,
searchable: false,
render: function ( data, type, row, meta ) {
return [
validatePaymentAction(row),
].join('');
}
}
]
})};
const isRenewal = function (row) {
return row.is_renewal ? 'Renovación' : 'Nueva';
}
const transactionStatus = function (status) {
if (status == undefined) {
return '';
}
if (status != 'CONFIRMED') {
return '<span class="label label-danger">'+status+'</span>'
}
return '<span class="label label-success">'+status+'</span>'
}
const paymentStatus = function (status) {
if (status == undefined) {
return '';
}
if (status != 'CONFIRMED') {
return '<span class="label label-danger">'+status+'</span>'
}
return '<span class="label label-success">'+status+'</span>'
}
const validatePaymentAction = function (row) {
if (row.state != 'CONFIRMED' && row.gateway_payments_id != null) {
return '<a href="#" onclick="validatePayment('+row.id+')"><i class="fa fa-credit-card iconMini" title="' + Lang.get('memberships.datatables.actions.validate') + '"></i></a>';
}
return '';
}
getData();
const defaultOrder = $(`#${SELECTOR_PREFIX}`).DataTable().column('membership_subscribers.created_at:name')[0][0];
$(`#${SELECTOR_PREFIX}`).DataTable().order([defaultOrder, 'desc']).draw();
});
const validatePayment = function (transactionId) {
$.ajax({
url: '/memberships/validate-payment/' + transactionId,
success: function (data) {
swal(
Lang.get('memberships.messages.edit_success'),
{
icon: "success",
buttons: {
Ok: true,
},
}).then((val) => {
if (val == "Ok") {
$(location).attr("href", '/memberships/dashboard');
}
}
);
},
error: function (a) {
swal("Error", a.responseJSON.message ?? Lang.get('memberships.messages.generic_error'), "error");
}
});
}
const clickExportAll = function () {
const table = $(`${SELECTOR_PREFIX}`).DataTable();
var validateDownloadUrl = document.location.origin + "/memberships/downloadReport";
var downloadUrl = document.location.origin + "/memberships/export/";
info = {
data: table.rows( { filter : 'applied'} ).data().toArray()
}
$.ajax({
url: validateDownloadUrl,
type: "POST",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
data: JSON.stringify({
states: $('select[name="states"]').val(),
is_renewal: $('select[name="is_renewal"]').val(),
start_date: $('input[name="start_date"]').val(),
end_date: $('input[name="end_date"]').val()
}),
success: function (response) {
const filename = Lang.get('memberships.export.file_name') + ".xlsx";
const rows = response.data;
const new_rows = rows.map(({start_date, end_date, ...rest}) => ({...rest, start_date: new Date(start_date), end_date: new Date(end_date)}));
let headers = Object.keys(new_rows[0]);
headers = headers.map((header) => Lang.get('memberships.export.columns.' + header));
console.log(headers);
const worksheet = XLSX.utils.json_to_sheet(new_rows);
XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Report");
XLSX.writeFile(workbook, filename, { compression: true });
$('#loading').hide();
},
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");
}
});
}
</script>
@endsection