File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/tickets/view/ticket-card.blade.php
<link rel="stylesheet" href="../../css/ticket/ticket-card-view.css?v=<?php echo time(); ?>">
<div class="ticket-card" id="ticket-card-{{ $ticket->id }}">
<div class="container-ticket">
<img height="604" onerror="if (this.src != 'error.jpg') this.src = '../../img/ticket/bg.png';" crossorigin="anonymous" class="image-background" width="100%"
src="{{ $ticket->match_event->season->tournament->ticket_background ? $s3Url . '/tournaments/' . $ticket->match_event->season->tournament->ticket_background : $parameters->url_ticket_backgroung }}">
<p class="fontOrganettoUltraBold text10 fz-10">
<b>NOMBRE: </b>
<span class="fontOrganettoRegular">{{ $ticket->user->short_name }}</span>
<b>- ID: </b>
<span class="fontOrganettoRegular">{{ $ticket->user->document }}</span>
</p>
<div class="header-images">
<img onerror="this.style.display='none'" crossorigin="anonymous" class="single-header-image" src="{{ $ticket->match_event->season->tournament->tournament_organizer->logo ? $s3Url . '/organizer/' . $ticket->match_event->season->tournament->tournament_organizer->logo : '' }}">
<img onerror="this.style.display='none'" crossorigin="anonymous" class="single-header-image" src="{{ $mainTeam ? $s3Url . '/teams/' . $mainTeam->logo : '' }}">
<img onerror="this.style.display='none'" crossorigin="anonymous" class="single-header-image" src="{{ $ticket->match_event->season->tournament->logo ? $s3Url . '/tournaments/' . $ticket->match_event->season->tournament->logo : '' }}">
</div>
<p class="fontOrganettoUltraBold text1 fz-11"><b>{{ $ticket->match_event->season->tournament->name }}</b></p>
<p class="fontOrganettoLight text2 fz-11">{{ $ticket->match_event->date_name }}</p>
<div class="text9">
<p class="fontOrganettoRegular fz-11">
ESTADIO:
<span class="fontOrganettoUltraBold subt6"><b>{{ $ticket->match_event->stadium_to_play }}</b></span>
</p>
</div>
<p class="fontOrganettoRegular text3 fz-11">
FECHA DEL PARTIDO:
<span class="fontOrganettoUltraBold subt6"><b>{{ \Carbon\Carbon::parse($ticket->match_event->event_start)->format('d-m-Y') }}</b></span>
</p>
<p class="fontOrganettoBold text4 fz-30">
{{ $mainTeam->abbreviation ?? '' }}
<span class="fontOrganettoRegular fz-21">VS</span>
{{ $ticket->match_event->team->abbreviation ?? '' }}
</p>
@if($hideDataSeat)
<div class="text6-flash-title">
<p class="fontOrganettoRegular subt1 fz-10-flash">HORA:</p>
<p class="fontOrganettoRegular subt1 fz-10-flash">TRIBUNA</p>
</div>
<div class="text6">
<p class="fontOrganettoUltraBold subt1 fz-12-flash">{{ \Carbon\Carbon::parse($ticket->match_event->event_start)->format('H:i') }}</p>
<p name="tribune-{{ $ticket->id }}" class="fontOrganettoUltraBold subt2 fz-12-flash"></p>
</div>
@else
<div class="text5">
<p class="fontOrganettoRegular fz-10">HORA:</p>
<p class="fontOrganettoRegular fz-10">TRIBUNA:</p>
<p class="fontOrganettoRegular fz-10">SECTOR:</p>
<p class="fontOrganettoRegular fz-10">FILA:</p>
<p class="fontOrganettoRegular fz-10">SILLA</p>
</div>
<div class="text6">
<p class="fontOrganettoUltraBold subt1 fz-12">{{ \Carbon\Carbon::parse($ticket->match_event->event_start)->format('H:i') }}</p>
<p name="tribune-{{ $ticket->id }}" class="fontOrganettoUltraBold subt2 fz-12"></p>
<p name="zone-{{ $ticket->id }}" class="fontOrganettoUltraBold subt2 fz-12"></p>
<p class="fontOrganettoUltraBold subt4 fz-12">{{ $ticket->seat->letter->name }}</p>
<p class="fontOrganettoUltraBold subt5 fz-12">{{ $ticket->seat->code }}</p>
</div>
@endif
@if($ticket->special_text)
<div class="text6-Optional">
<p class="fontOrganettoUltraBold subt2-optional fz-25">{{ $ticket->special_text }}</p>
</div>
@endif
<div class="image-qr" height="200" width="200" style="height: 200px; width: 200px;">
<img src="" style="border: 1px solid white;" id="qr-{{ $ticket->id }}">
</div>
@if($ticketParameters->qrcode_type == 'static')
<p class="fontOrganettoUltraBold text7 fz-10">
COD:
<span class="fontOrganettoRegular">{{ $ticket->code_ticket }}</span>
</p>
@endif
<p class="fontOrganettoUltraBold text8 fz-14">
VALOR:
<span name="price-{{ $ticket->id }}" class="fontOrganettoRegular" data-price="{{ $ticket->price }}"></span>
</p>
<img height="20" width="100%" crossorigin="anonymous" class="image_sponsor"
src="{{ $ticket->match_event->season->tournament->footer_sponsors ? $s3Url . '/tournaments/' . $ticket->match_event->season->tournament->footer_sponsors : $parameters->url_ticket_sponsor }}">
@if ($ticket->cufe)
<p class="fontOrganettoRegular cufe fz-3">
CUFE: {{ $ticket.cufe }}
</p>
@endif
</div>
<input type="hidden" id="type" value="{{ $ticketParameters->qrcode_type }}">
<input type="hidden" id="currency" value="{{ $corporateIdentity->currency }}">
<input type="hidden" id="minimumFractionDigits" value="{{ $corporateIdentity->minimum_fraction_digits }}">
<input type="hidden" id="maximumFractionDigits" value="{{ $corporateIdentity->maximum_fraction_digits }}">
</div>
<div class="actions">
@if ($ticketParameters->qrcode_type == 'static')
@if($ticketParameters->enable_download_button != 'false')
<button type="button" style="margin: 0px 0px 10px 0px;" class="btn btn-primary pull-right" onclick="download()">Descargar Boleta</button>
@endif
@else
@if($ticketParameters->enable_transfer_ticket != 'false')
<button type="button" style="margin: 0px 0px 10px 0px;" class="btn btn-primary pull-right" onclick="transfer()" <?php echo !($ticketParameters->number_transfers > 0 && $ticket->confirm_stadium_ticket == 'PENDIENTE') ? 'disabled' : ''; ?>>Transferir Boleta</button>
@endif
@endif
</div>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
function download() {
const id = "<?php echo $ticket->id; ?>";
const code = "<?php echo $ticket->code_ticket; ?>";
var element = document.getElementById("ticket-card-" + id);
// Wait for images to load before capturing the div
const images = element.querySelectorAll('img');
const promises = Array.from(images).map(img => {
return new Promise((resolve, reject) => {
if (img.complete) {
resolve();
} else {
img.onload = resolve;
img.onerror = reject;
}
});
});
Promise.all(promises)
.then(() => {
html2canvas(element, {
useCORS: true, // Enable cross-origin image loading
allowTaint: true, // Allow images without CORS headers
}).then((ticket) => {
const link = document.createElement('a');
link.download = code + '.png';
link.href = ticket.toDataURL('image/png');
link.click();
});
})
.catch((err) => {
console.error('An image failed to load:', err);
});
}
function transfer() {
swal('¡Atención!', 'Esta funcionalidad no está disponible en esta versión.', 'warning');
}
function formatCurrency(value) {
currency = document.getElementById('currency').value;
minimumFractionDigits = parseInt(document.getElementById('minimumFractionDigits').value);
maximumFractionDigits = parseInt(document.getElementById('maximumFractionDigits').value);
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
currencyDisplay: 'narrowSymbol',
minimumFractionDigits: minimumFractionDigits,
maximumFractionDigits: maximumFractionDigits,
}).format(value);
}
function formatZone() {
tribune = "<?php echo $ticket->seat->zone->zone->name; ?>";
zoneMain = "<?php echo $ticket->zone; ?>";
specialTicket = "<?php echo $ticket->special_ticket; ?>";
zones = zoneMain.split("_");
zone = zones[0];
zone = zone.replace(tribune, '');
zone = zone.trim();
let ticketZone = '';
if (zones.length > 1) {
ticketZone = zones[1];
} else {
zones = zoneMain.split(" ");
if (zones[0].includes(tribune)) {
zone = zones[1];
} else {
zone = zones[0];
}
ticketZone = zoneMain.split(zone + ' ')[1];
zone = zone.slice(0, 3);
}
tribune = tribune.toUpperCase();
if (zone) {
if (specialTicket !== 'null') {
tribune = tribune.slice(0, 3) + '-' + zone;
} else {
tribune = tribune + '-' + zone;
}
} else {
tribune = tribune;
}
return {
tribune: tribune,
zone: ticketZone
};
}
function loadQR() {
let code = "<?php echo $ticket->code_ticket; ?>";
const id = "<?php echo $ticket->id; ?>";
const encryptedCode = btoa(code);
axios.get('/dynamic-qr' + '?code=' + encodeURIComponent(encryptedCode))
.then(response => {
if (response.data.error) {
swal('Error', response.data.error, 'error');
return;
}
const qrContainer = document.getElementById('qr-' + id);
qrContainer.src = response.data.qrCode;
})
.catch(error => console.error('Error al cargar el QR:', error));
}
qrRotationAngle = 90;
function rotateQR() {
if (qrRotationAngle >= 360) {
qrRotationAngle = 0;
}
const id = "<?php echo $ticket->id; ?>";
const qrContainer = document.getElementById('qr-' + id);
qrContainer.style.transform = 'rotate(' + qrRotationAngle + 'deg)';
qrRotationAngle += 90;
}
// Load Initial QR code
loadQR();
// Set interval to load QR code
type = document.getElementById('type').value;
if (type == 'with_timestamp') {
setInterval(loadQR, 1000 * <?php echo $ticketParameters->qrcode_time ?? 60; ?>);
} else if (type == 'without_timestamp') {
setInterval(rotateQR, 1000 * <?php echo $ticketParameters->qrcode_time ?? 60; ?>);
}
// Format price
id = "<?php echo $ticket->id; ?>";
priceElement = document.querySelector('[name="price-' + id + '"]');
priceValue = parseFloat(priceElement.getAttribute('data-price'));
formattedPrice = formatCurrency(priceValue);
priceElement.textContent = formattedPrice;
// Set tribune, zone
formatZone = formatZone();
tribuneElement = document.querySelector('[name="tribune-' + id + '"]');
tribuneElement.textContent = formatZone.tribune;
zoneElement = document.querySelector('[name="zone-' + id + '"]');
zoneElement.textContent = formatZone.zone;
</script>