File: /var/www/vhost/disk-apps/comfama.sports-crowd.com/resources/views/users/clients.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;
}
</style>
@php
$page_prefix = "clients"
@endphp
@if(!in_array(Auth::user()->rol->id, [7,15]))
<div class="box-header">
<a class="btn btn-app btnReportProducts" href="{{ url('/clients/report/all') }}">
<i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag10') }}
</a>
<a class="btn btn-app btnReportProducts" href="{{ url('/clients/report/never') }}">
<i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag8') }}
</a>
<a class="btn btn-app btnReportProducts" href="{{ url('/clients/report/fifteen') }}">
<i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_clients_tag9') }}
</a>
<a class="btn btn-app btnReportProducts" onclick="clickExportClients()">
<i class="fa fa-file-excel-o"></i> {{ Lang::get('messages.tickets_matches.export.title_0') }}
</a>
<a class="btn btn-app btnReportProducts" data-toggle="modal" data-target="#modalImportTagsToClients">
<i class="fa fa-cloud-upload"></i> {{ Lang::get('messages.screen_clients_tag22') }}
</a>
{{-- <a class="auxiliar" href="{{url('/clients/up/date')}}"><button type="button" class="btn pull-left btnBox ">
<i style="margin-right:5px;" class="fa fa-file"></i>{{ Lang::get('messages.screen_clients_tag1')}}
</button></a> --}}
<a class="auxiliar-black" href="{{url('/clients/add')}}"> <button class="btn btnAdd pull-right">
<i class="fa fa-plus"></i> {{ Lang::get('messages.screen_clients_tag7')}}</button></a>
</div>
@endif
<!-- /.box-body -->
<!-- LISTADO clientes-->
<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-9 col-md-9">
<label for="tags">{{ Lang::get('messages.screen_clients_tag28') }}</label>
<div class="form-group">
@include('layouts.multiselect')
</div>
</div>
<div class="col-3 col-md-3">
<div class="form-group">
<label for="isSubscriber">{{ Lang::get('messages.screen_clients_tag12') }}</label>
<input type='text' id="isSubscriber" name="isSubscriber" style="cursor: pointer; width: 28px;" onfocus='this.blur()' readonly='true' value=' ' onclick='tristate()' />
</div>
</div>
</div>
<div class="row">
<div class="col-3 col-md-3">
<label for="from_date">{{ Lang::get('messages.screen_clients_tag24')}}</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.screen_clients_tag25')}}</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 class="col-3 col-md-3">
<label for="last_entry_from_date">{{ Lang::get('messages.screen_clients_tag26')}}</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="last_entry_from_date" value="" autocomplete="off">
</div>
</div>
<div class="col-3 col-md-3">
<label for="last_entry_to_date">{{ Lang::get('messages.screen_clients_tag27')}}</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="last_entry_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.screen_clients_tag2')}}</b></h3>
</div>
<!-- /.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">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag4')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag3')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag5')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag11')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag13')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag14')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag19')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag15')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag16')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag17')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag18')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag20')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag21')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag22')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_accept_terms')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_terms_conditions')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag6')}}</th>
<th class="sorting" tabindex="0" aria-controls="{{$page_prefix}}" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_clients_tag0') }}</th>
</tr>
</thead>
</table>
</div>
</div>
@include('users.modal.modalImportTagsToClients')
@include('users.modal.modalInfoClient')
@include('users.modal.modalCarnetClient')
<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://maps.googleapis.com/maps/api/js?key={{config('googlmapper.key')}}&libraries=places,geometry" async defer></script>
<script src="{{ asset('js/ux.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/util.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') . '?v=' . time() }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
const SELECTOR_PREFIX = "{{$page_prefix}}";
let check = null;
$(document).ready(function() {
validateLocalStoreInformation();
getClients();
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 Cedula, Nombre y Correo</p></div>';
$('#clients_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'
});
$("input[name='last_entry_from_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("input[name='last_entry_to_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("select[name='generalMultiselect']").on('change', function() {
cleanPagination();
getClients();
});
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;
cleanPagination();
getClients();
} else {
localStore("clientsfilterFrom_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;
cleanPagination();
getClients();
} else {
localStore("clientsfilterTo_date", this.value);
}
});
let last_entry_from_date;
$("input[name='last_entry_from_date']").on('change', function(event) {
if ((this.value && last_entry_from_date != this.value) || (!this.value && last_entry_from_date)) {
last_entry_from_date = this.value;
cleanPagination();
getClients();
} else {
localStore("filterLast_from_date", this.value);
}
});
let last_entry_to_date;
$("input[name='last_entry_to_date']").on('change', function() {
if ((this.value && last_entry_to_date != this.value) || (!this.value && last_entry_to_date)) {
last_entry_to_date = this.value;
cleanPagination();
getClients();
} else {
localStore("filterLast_to_date", this.value);
}
});
});
function tristate() {
cleanPagination();
check = localRetrieve(`${SELECTOR_PREFIX}_check`);
localStore(`${SELECTOR_PREFIX}_check`, (check + 1) % 3);
setTristateValue();
getClients();
}
let setTristateValue = () => {
const values = ['\u0020', '\u2705', '\u274C'];
$("#isSubscriber").val(values[check]);
}
function getClients() {
check = localRetrieve(`${SELECTOR_PREFIX}_check`);
setTristateValue();
let status = $("select[name='generalMultiselect']").val();
let from_date = $("input[name='from_date']").val();
let to_date = $("input[name='to_date']").val();
let last_entry_from_date = $("input[name='last_entry_from_date']").val();
let last_entry_to_date = $("input[name='last_entry_to_date']").val();
localStore(`${SELECTOR_PREFIX}_filterStatus`, status);
localStore(`${SELECTOR_PREFIX}_clientsfilterFromDate`, from_date);
localStore(`${SELECTOR_PREFIX}_clientsfilterToDate`, to_date);
localStore(`${SELECTOR_PREFIX}_filterLastFromDate`, last_entry_from_date);
localStore(`${SELECTOR_PREFIX}_filterLastToDate`, last_entry_to_date);
var sort_col = $(`#${SELECTOR_PREFIX}`).find("th:contains(" + Lang.get('messages.screen_clients_tag16') + ")")[0].cellIndex;
$(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
_table = $(`#${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,
order: [
[sort_col, 'desc']
],
"language": {
url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
},
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2,
right: 2
},
ajax: {
url: '/clients/filter',
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: "POST",
data: {
check: check,
status: status,
from_date: from_date,
to_date: to_date,
last_entry_from_date: last_entry_from_date,
last_entry_to_date: last_entry_to_date
}
},
columns: [{
data: 'first_name',
name: 'first_name',
},
{
data: 'last_name',
name: 'last_name'
},
{
data: 'email',
name: 'email'
},
{
data: 'is_subscriber',
render: function(data, type, row, column) {
return row.is_subscriber ? 'SI' : 'NO';
},
name: 'is_subscriber'
},
{
data: 'document',
name: 'document',
},
{
data: 'documentType',
name: 'document_types.name',
},
{
data: 'dob',
name: 'user_informations.dob',
},
{
data: 'phone',
name: 'phone',
},
{
data: 'created_at',
name: 'created_at',
},
{
data: 'last_session',
name: 'last_session',
},
{
data: 'time_session',
name: 'last_session',
},
{
data: 'sex',
name: 'user_informations.sex',
},
{
data: 'model',
name: 'user_informations.model',
},
{
data: 'segmentation',
render: function(data, type, row) {
let tags = '';
if (row.segmentation) {
let list = row.segmentation.split(',');
let data = list.map(function(d) {
return '<li>' + d + '</li>';
});
tags = data.join('');
}
return tags;
},
name: 'users.id',
},
{
data: 'accepted',
render: function(data, type, row, column) {
return row.accepted ? 'SI' : 'NO';
},
name: 'users.id',
},
{
data: 'terms_conditions',
name: 'users.id',
},
{
data: 'active',
name: 'active',
},
{
data: 'actions',
name: 'actions'
}
]
});
}
function validateLocalStoreInformation() {
$("select[name='generalMultiselect']").select2().val(localRetrieve(`${SELECTOR_PREFIX}_filterStatus`));
$("input[name='from_date']").val(localRetrieve(`${SELECTOR_PREFIX}_clientsfilterFromDate`));
$("input[name='to_date']").val(localRetrieve(`${SELECTOR_PREFIX}_clientsfilterToDate`));
$("input[name='last_entry_from_date']").val(localRetrieve(`${SELECTOR_PREFIX}_filterLastFromDate`));
$("input[name='last_entry_to_date']").val(localRetrieve(`${SELECTOR_PREFIX}_filterLastToDate`));
}
let cleanPagination = function() {
localRemove(`DataTables_${SELECTOR_PREFIX}`);
}
</script>
@endsection