File: /var/www/vhost/disk-apps/demo.sports-crowd.com/resources/views/academy/renewal/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;
}
.canvas-container {
display: flex;
align-items: center;
justify-content: center;
}
.pendingPayment {
background-color: #FB5656 !important;
}
/* toasts */
* {
box-sizing: border-box;
}
.btn:active {
transform: scale(0.98);
}
#toasts {
position: fixed;
bottom: 100px;
right: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 1051;
}
.toast {
width: 300px;
height: 70px;
border-radius: 5px;
margin: 0.5rem;
color: #ffffff;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}
.success {
background-color: #4caf50;
}
</style>
<div class="box-header">
<a class="btn btn-app btnReportProducts" onclick="clickExportAll('{{ $type_academy }}')">
<i class="fa fa-file-excel-o"></i> {{ Lang::get('messages.screen_credit_coins_tag12') }}
</a>
</div>
<div class="box">
<div class="box-header">
<h3 class="box-title"><b>{{ Lang::get('messages.academy_users.filters') }}</b></h3>
<div class="row">
<div class="col-3 col-md-3">
<label for="states">{{ Lang::get('messages.academy_renewal.filter_document') }}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('messages.academy_users.placeholder_select') }}" name="states" value="" required>
@foreach ($states as $state)
<option value="{{ $state->id }}">{{ $state->name }}</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="from_date">{{ Lang::get('messages.academy_renewal.init_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('messages.academy_users.placeholder_date') }}" name="from_date" value="" autocomplete="off">
</div>
</div>
<div class="col-3 col-md-3">
<label for="to_date">{{ Lang::get('messages.academy_renewal.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('messages.academy_users.placeholder_date') }}" name="to_date" value="" autocomplete="off">
</div>
</div>
</div>
<p style="margin-top: 10px; border-bottom: 1px solid #D3D3D3;"></p>
<h3 class="box-title"><b>{{ Lang::get('messages.academy_renewal.title') }}</b></h3>
</div>
<!-- /.box-header -->
<table id="example2" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.student_name') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.student_lastname') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">
{{ config('app.location') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.document') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.student_identification') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.created_at') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.academy_renewal.actions') }}</th>
</tr>
</thead>
</table>
<!-- /.box-body -->
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
$(document).on('click', '[data-dowload-doc]', function(e) {
const fromURL = e.target.dataset.dowloadDoc;
const fileName = fromURL.substring(fromURL.lastIndexOf("/") + 1);
fetch(fromURL)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const enlaceDescarga = document.createElement('a');
enlaceDescarga.href = url;
enlaceDescarga.download = fileName;
enlaceDescarga.click();
window.URL.revokeObjectURL(url);
});
})
$(document).ready(function() {
validateLocalStoreInformation();
getData();
var info =
'<i class="fa fa-info-circle" id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Código, Nombre y Teléfono</p></div>';
$('#example2_filter').append(info);
$('#btn-info-busqueda').on('click', function() {
$('#menuBusqueda').toggle();
});
$('.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='from_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("input[name='to_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("select[name='states']").on('change', function() {
getData();
});
let from_date;
$("input[name='from_date']").on('change', function(event) {
if ((this.value && from_date != this.value) || (!this.value && from_date)) {
from_date = this.value;
getData();
} else {
filterData("filterFrom_date", this.value);
}
});
let to_date;
$("input[name='to_date']").on('change', function() {
if ((this.value && to_date != this.value) || (!this.value && to_date)) {
to_date = this.value;
getData();
} else {
filterData("filterTo_date", this.value);
}
});
});
function getData() {
let states = $("select[name='states']").val();
let from_date = $("input[name='from_date']").val();
let to_date = $("input[name='to_date']").val();
filterData("filterStates", states);
filterData("filterFrom_date", from_date);
filterData("filterTo_date", to_date);
var typeAcademy = <?php echo json_encode($type_academy); ?>;
var sort_col = $('#example2').find("th:contains(" + Lang.get('messages.academy_renewal.created_at') + ")")[0].cellIndex;
var tableData = [{
data: 'student_name',
name: 'student_name'
},
{
data: 'student_last_name',
name: 'student_last_name'
},
{
data: 'locationName',
render: function(data, type, row) {
return row.locationName ?? row.academy_place;
},
name: 'academy_locations.name' || 'academy_place'
},
{
data: 'documentName',
name: 'academy_documents.name'
},
{
data: 'identification',
name: 'identification'
},
{
data: 'updated_at',
name: 'updated_at'
},
{
data: 'actions',
name: 'actions'
},
];
if (typeAcademy != 'children') {
tableData = tableData.filter(function(obj) {
return obj.data !== 'school_name';
});
}
let fixedColumns = false;
let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobileDevice) {
fixedColumns = {
left: 3,
right: 2
};
}
$("#example2").dataTable().fnDestroy();
_table = $('#example2').DataTable({
responsive: true,
processing: true,
serverSide: true,
order: [
[sort_col, 'desc']
],
language: {
url: window.DATATABLES_LANGUAGE_URL,
},
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: fixedColumns,
ajax: {
url: '/renew_enrollment/list/' + states + '/' + (from_date.length ? from_date :
'null') + '/' + (to_date.length ? to_date : 'null') + '/' + typeAcademy,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: "POST"
},
columns: tableData,
});
$('#example2').on('page.dt', function() {
window.actualPage = $('#example2').DataTable().page();
localStorage.setItem("setPaginaActual", $('#example2').DataTable().page());
});
$('#example2').on('init.dt', function() {
if (localStorage.getItem("setPaginaActual")) {
let paginationCurrent = Number(localStorage.getItem("setPaginaActual", $('#example2')
.DataTable().page()));
$('#example2').DataTable().page(paginationCurrent).draw('page');
}
});
var info = '<i class="fa fa-info-circle" id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Nombre, Orden y Link</p></div>';
$('#example2_filter').append(info);
$('#btn-info-busqueda').on('click', function() {
$('#menuBusqueda').toggle();
});
}
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) {
localStorage.setItem("setPaginaActual", 0);
}
}
}, false);
function clickExportAll(typeAcademy) {
$('#loading').show();
_table = $("#example2").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 + "/renew_enrollment/validateExport";
var downloadUrl = document.location.origin + "/renew_enrollment/export/";
var formData = new FormData();
formData.append("query", query);
formData.append("bindings", bindings);
formData.append("type_academy", typeAcademy);
$.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");
}
});
}
function filterData(setKey, filter) {
localStorage.setItem(setKey, filter);
}
function validateLocalStoreInformation() {
states = localStorage.getItem("filterStates");
status = localStorage.getItem("filterStatus");
from_date = localStorage.getItem("filterFrom_date");
to_date = localStorage.getItem("filterTo_date");
$("select[name='states']").val(states);
$("select[name='status']").val(status);
$("input[name='from_date']").val(from_date);
$("input[name='to_date']").val(to_date);
}
</script>
@endsection