File: /var/www/vhost/disk-apps/demo.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') }}" id="states" 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') }}" id="is_renewal" 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 src="{{ asset('js/memberships.js') . '?v=' . time() }}"></script>
<script type="text/javascript">
const SELECTOR_PREFIX = "{{$page_prefix}}";
$(document).ready(function() {
$('#states').val(['CONFIRMED', 'EXPIRED']);
$('.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: window.DATATABLES_LANGUAGE_URL,
},
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: 'memberships.id',
data: 'memberships.id',
title: Lang.get('memberships.datatables.columns.id'),
render: function(data, type, row, meta) {
return [
row.id,
].join('');
}
},
{
name: 'users.name',
data: 'users.name',
title: Lang.get('memberships.datatables.columns.first_name'),
render: function(data, type, row, meta) {
if (row.dependent_id) {
return [
row.dependent_first_name,
].join('');
}
return [
row.first_name,
].join('');
}
},
{
name: 'users.name',
data: 'users.name',
title: Lang.get('memberships.datatables.columns.last_name'),
render: function(data, type, row, meta) {
if (row.dependent_id) {
return [
row.dependent_last_name,
].join('');
}
return [
row.last_name,
].join('');
}
},
{
name: 'users.document',
data: 'users.document',
title: Lang.get('memberships.datatables.columns.document'),
render: function(data, type, row, meta) {
return [
row.document,
].join('');
}
},
{
name: 'membership_orders.type',
data: 'membership_orders.type',
title: Lang.get('memberships.datatables.columns.user_type'),
render: function(data, type, row, meta) {
if (row.buyer_user_id != row.user_id || row.dependent_id) {
return Lang.get('memberships.defaults.beneficiary');
}
return Lang.get('memberships.defaults.self_purchase');
}
},
{
name: 'membership_orders.name',
data: 'membership_orders.name',
title: Lang.get('memberships.datatables.columns.buyer_first_name'),
render: function(data, type, row, meta) {
return [
row.buyer_first_name,
].join('');
}
},
{
name: 'membership_orders.name',
data: 'membership_orders.name',
title: Lang.get('memberships.datatables.columns.buyer_last_name'),
render: function(data, type, row, meta) {
return [
row.buyer_last_name,
].join('');
}
},
{
name: 'membership_orders.document',
data: 'membership_orders.document',
title: Lang.get('memberships.datatables.columns.buyer_document'),
render: function(data, type, row, meta) {
return row.buyer_document;
}
},
{
name: 'membership_orders.email',
data: 'membership_orders.email',
title: Lang.get('memberships.datatables.columns.buyer_email'),
render: function(data, type, row, meta) {
return row.buyer_email;
}
},
{
name: 'membership_orders.phone',
data: 'membership_orders.phone',
title: Lang.get('memberships.datatables.columns.buyer_phone'),
render: function(data, type, row, meta) {
return row.buyer_phone;
}
},
{
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('');
}
},
{
name: 'membership_subscribers.tracking_code',
data: 'membership_subscribers.tracking_code',
title: Lang.get('memberships.datatables.columns.tracking_code'),
render: function(data, type, row, meta) {
return [
row.tracking_code,
].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();
});
</script>
@endsection