File: /var/www/vhost/disk-apps/demo.sports-crowd.com/resources/views/complimentary_tickets/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 = "complimentary_tickets";
@endphp
<div class="box-header">
<a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
<i class="fa fa-file-excel-o"></i> {{ Lang::get('complimentary_tickets.export_data') }}
</a>
</div>
<!-- List complimentary tickets -->
<div class="box">
<div class="box-header">
<h3 class="box-title"><b>{{ Lang::get('complimentary_tickets.filters') }}</b></h3>
<div class="row">
<div class="col-3 col-md-3">
<label for="seasons">{{ Lang::get('complimentary_tickets.filter_seasons')}}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('complimentary_tickets.placeholder_select') }}" name="seasons" value="" required>
@foreach ($seasons as $season)
<option value="{{ $season->id }}">{{ $season->name }}</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="matchEvents">{{ Lang::get('complimentary_tickets.filter_match_events')}}</label>
<select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('complimentary_tickets.placeholder_select') }}" name="matchEvents" value="" required>
@foreach ($matchEvents as $event)
<option value="{{ $event->id }}">{{ $event->name }} / {{ $event->event_start }} ({{ $event->active ? 'ACTIVO' : 'INACTIVO' }})</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="endComplimentaryTicket">{{ Lang::get('complimentary_tickets.filter_dates')}}</label>
<select class="form-control" name="range" id="date-range" onchange="toggleCustomDate()">
<option value="15" {{ request('range') == 15 ? 'selected' : '' }}>Últimos 15 días</option>
<option value="30" {{ request('range') == 30 ? 'selected' : '' }}>Últimos 30 días</option>
<option value="90" {{ request('range') == 90 ? 'selected' : '' }}>Últimos 90 días</option>
<option value="all" {{ request('range') == 'all' ? 'selected' : '' }}>Todas</option>
</select>
<input type="date" name="start_date" id="start-date" value="{{ request('start_date') }}" style="display:none;">
<input type="date" name="end_date" id="end-date" value="{{ request('end_date') }}" style="display:none;">
</div>
</div>
<p style="margin-top: 10px; border-bottom: 1px solid #D3D3D3;"></p>
<h3 class="box-title"><b>{{ Lang::get('complimentary_tickets.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>
<!-- Modal para seleccionar zona -->
<div class="modal fade" id="zoneModal" tabindex="-1" role="dialog" aria-labelledby="zoneModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="zoneModalLabel">Seleccionar zona</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label for="modalZoneSelect">Zona:</label>
<select id="modalZoneSelect" class="form-control">
<option value="">Selecciona una zona</option>
<!-- Opciones dinámicas -->
</select>
</div>
<div class="modal-footer">
<button type="button" id="confirmZoneBtn" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="zoneId" value="">
@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 src="{{ asset('js/complimentary_tickets.js') . '?v=' . time() }}"></script>
<script type="text/javascript">
const SELECTOR_PREFIX = "{{$page_prefix}}";
$(document).ready(function() {
$("#start-date").val(moment().subtract(15, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
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='start_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("input[name='end_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("select[name='seasons']").on('change', function() {
getData();
});
$("select[name='matchEvents']").on('change', function() {
getData();
});
});
function getData() {
let seasons = $("select[name='seasons']").val();
let matchEvents = $("select[name='matchEvents']").val();
let startComplimentaryTicket = $("input[name='start_date']").val();
let endComplimentaryTicket = $("input[name='end_date']").val();
filterData("filterSeasons", seasons);
filterData("filterMatchEvents", matchEvents);
filterData("filterStart", startComplimentaryTicket);
filterData("filterEnd", endComplimentaryTicket);
if ($(`#${SELECTOR_PREFIX}`).html()) {
$(`#${SELECTOR_PREFIX}`).DataTable().destroy();
}
let fixedColumns = false;
let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobileDevice) {
fixedColumns = {
left: 1,
right: 1
};
}
$(`#${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('complimentary_tickets.table') }}",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: "POST",
data: {
seasons: seasons,
matchEvents: matchEvents,
startComplimentaryTicket: startComplimentaryTicket,
endComplimentaryTicket: endComplimentaryTicket
}
},
columns: [{
data: 'reference',
name: 'ticket_mains.payment_reference' || 'ticket_mains.id',
title: Lang.get('complimentary_tickets.datatables.columns.reference'),
},
{
data: 'email',
name: 'users.email',
title: Lang.get('complimentary_tickets.datatables.columns.email'),
},
{
data: 'document',
name: 'users.document',
title: Lang.get('complimentary_tickets.datatables.columns.document'),
},
{
data: 'tickets',
name: 'tickets',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.tickets'),
},
{
data: 'season',
name: 'seasons.name',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.season'),
},
{
data: 'match_event',
name: 'match_events.name',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.match_event'),
},
{
data: 'match_event_date',
name: 'match_events.date_name',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.match_event_date'),
},
{
data: 'zone',
name: 'tickets.zone',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.zone'),
},
{
data: 'created_at',
name: 'ticket_mains.created_at',
searchable: false,
title: Lang.get('complimentary_tickets.datatables.columns.created_at'),
},
{
data: 'actions',
name: 'actions',
title: Lang.get('complimentary_tickets.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 + "/complimentary_tickets/validateExport";
var downloadUrl = document.location.origin + "/complimentary_tickets/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("filterSeasons");
localStorage.removeItem("filterMatchEvents");
localStorage.removeItem("filterStart");
localStorage.removeItem("filterEnd");
}
}
}, false);
function filterData(setKey, filter) {
localStorage.setItem(setKey, filter);
}
function validateLocalStoreInformation() {
seasons = localStorage.getItem("filterSeasons");
matchEvents = localStorage.getItem("filterMatchEvents");
startComplimentaryTicket = localStorage.getItem("filterStart");
endComplimentaryTicket = localStorage.getItem("filterEnd");
$("select[name='seasons']").val(seasons);
$("select[name='matchEvents']").val(matchEvents);
$("input[name='startComplimentaryTicket']").val(startComplimentaryTicket);
$("input[name='endComplimentaryTicket']").val(endComplimentaryTicket);
}
function toggleCustomDate() {
let range = document.getElementById("date-range").value;
switch (range) {
case "15":
$("#start-date").val(moment().subtract(15, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "30":
$("#start-date").val(moment().subtract(30, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "90":
$("#start-date").val(moment().subtract(90, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "all":
$("#start-date").val("");
$("#end-date").val("");
break;
}
getData();
}
</script>