File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/flash_ticket/selling.blade.php
@section('extra-css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.19/build/css/intlTelInput.min.css" />
<style>
.m-r-10 {
margin-right: 10px !important;
margin-top: 10px !important;
padding: 5px;
display: inline-block;
}
.pos-r {
position: relative !important;
}
.image_seat {
width: 30px !important;
}
.image_seat_example {
width: 30px !important;
}
.name_seat {
position: absolute;
left: 10px;
bottom: 0;
}
.m-b-10 {
margin-bottom: 10px !important;
}
.cursor {
cursor: pointer;
}
.container_image {
position: relative;
}
.float-left {
float: left;
}
.d-c {
display: contents;
}
.label_letter {
position: absolute;
left: 10px;
margin-bottom: 20px;
}
.container_row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.d-i-t {
/* margin-right: 10px !important; */
margin-top: 10px !important;
/* padding: 5px; */
min-width: 35px;
display: inline-grid;
}
.text-center {
text-align: center;
}
.text-alert {
color: #a94442;
text-align: justify;
}
.small_price {
position: absolute !important;
top: 30px !important;
right: 15px !important;
font-size: 100% !important;
font-weight: bold !important;
}
.small_price_abono {
position: absolute !important;
top: 11px !important;
right: 15px !important;
font-size: 100% !important;
font-weight: bold !important;
}
.m-t-5 {
margin-top: 5px;
}
.bg-seat-selected {
filter: invert(24%) sepia(53%) saturate(3980%) hue-rotate(232deg) brightness(89%) contrast(97%);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: #fff;
}
.buttonBuy {
margin-top: 8px;
margin-right: 20px;
}
.container_total {
display: flex;
align-items: flex-end;
justify-content: flex-end;
margin-right: 10px;
font-weight: bold;
font-size: 20px;
}
.display-contents {
display: contents;
}
.m-r-20 {
margin-right: 20px;
}
.container_form {
display: flex;
flex-direction: column;
}
.containerCheckbox {
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
width: 100px;
}
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical>.btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical>.btn:first-child {
border-top-right-radius: 4px;
}
.input-group-btn-vertical>.btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i {
position: absolute;
top: 0;
left: 4px;
}
.swal-modal {
width: fit-content !important;
}
.swal-buttons-container {
display: flex;
flex-flow: row;
}
.swal-button-action {
display: flex;
flex-flow: column;
margin: 0 10px;
justify-content: center;
background-color: <?php echo $corporateIdentity->btnBox_color ?>;
}
.swal-button-action i {
font-size: 2.8em;
/* Ajusta a tu gusto */
margin-right: 8px;
vertical-align: middle;
}
.swal-button-cancel {
position: absolute;
top: 8px;
right: 12px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #888;
user-select: none;
}
.available-tickets {
text-align: start;
}
.available-tickets h3 {
margin: 0;
}
.prices {
text-align: end;
}
.prices h3,
.prices h2 {
margin: 0;
}
#whatsappModal .modal-dialog,
#emailModal .modal-dialog {
transform: translate(0%, 100%);
}
#whatsappModal .modal-content,
#emailModal .modal-content {
border: none;
border-radius: 10px;
}
h5.modal-title {
font-size: 20px;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
font-weight: 600;
color: #374151;
/* gris oscuro tipo Tailwind */
margin-bottom: 0.5rem;
}
.form-input {
width: 100%;
padding: 0.75rem 0rem 0.75rem 0.25rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
outline: none;
font-size: 1.5rem;
transition: border-color 0.2s;
}
.form-input:focus {
border-color: <?php echo $corporateIdentity->btnBox_color ?>;
box-shadow: 0 0 0 1px <?php echo $corporateIdentity->btnBox_color ?>;
}
.phone-wrapper {
width: 100%;
}
.phone-wrapper .form-input {
width: 100%;
box-sizing: border-box;
}
.iti {
width: 100%;
}
.iti input {
width: 100%;
box-sizing: border-box;
}
.buttons {
display: flex;
justify-content: center;
}
</style>
@extends('modules.head') @section('contenido')
<h3>Venta Taquilla</h3>
<div class="form-group col-md-12">
<button class="swal-button swal-button-action" style="margin: 0px;" onclick="openTickets()">
<i class="fa fa-ticket"></i>Ver boletas vendidas
</button>
</div>
<div class="text-center" id="container_event">
<div class="form-group col-md-12">
<label for="event_select">{{ Lang::get('messages.tickets.title_20') }}</label>
<select class="form-control" id="event_select" name="event_select" onchange="selectEvent(this);">
<option value="0" disabled selected>@lang('messages.select')</option>
@forelse ($events as $event)
<option value="{{ $event }}">{{ $event->name }} - {{ $event->event_start }}
({{ $event->zone . ', ' . $event->salable_capacity . ' Max. Capacidad' }})
</option>
@empty
<option value="0">No hay eventos</option>
@endforelse
</select>
</div>
<div id="web_price_container" class="displayNone">
<h3 style="padding-top: 100px !important">Boletas taquilla</h3>
<div class="form-group col-md-3">
<label for="web_amount" id="web_amount_label" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
<div class="input-group spinner" id="spinner_web">
<input type="text" class="form-control" value="0" id="web_amount" name="web_amount"
onkeyup="calculateRelativeTotal(this.id);" minvalue="0" style="width: auto;" pattern="[0-9]"
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div class="form-group col-md-3">
<label for="web_text" class="ul-form__label">@lang('messages.flash_ticket.title_13')</label>
<input type="number" class="form-control" id="web_text" name="web_text" placeholder="" required readonly>
</div>
<div class="form-group col-md-3">
<label for="web_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
<input type="number" class="form-control" id="web_price" name="web_price" placeholder="" required readonly>
</div>
<div class="form-group col-md-3">
<label for="web_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
<input type="number" class="form-control" id="web_total_price" name="web_total_price" placeholder=""
required readonly>
</div>
<input type="hidden" class="form-control" id="web_service_charge" name="web_service_charge" placeholder=""
required readonly>
</div>
<div id="special_price_container" class="displayNone">
<h3 style="padding-top: 100px !important">Boletas especiales</h3>
<div class="form-group col-md-3">
<label for="special_amount" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
<div class="input-group spinner" id="spinner_special">
<input type="text" class="form-control" value="0" id="special_amount" name="special_amount"
onkeyup="calculateRelativeTotal(this.id);" minvalue="0" style="width: auto;" pattern="[0-9]"
oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div class="form-group col-md-3">
<label for="special_text">{{ Lang::get('messages.flash_ticket.title_13') }}</label>
<select class="form-control" id="special_text" name="special_text" required>
<option value="0" disabled selected>@lang('messages.select')</option>
@forelse ($ticketTags as $ticketTag)
<option value="{{ $ticketTag->name }}">{{ $ticketTag->name }}</option>
@empty
<option value="">No hay etiquetas</option>
@endforelse
</select>
</div>
<div class="form-group col-md-3">
<label for="special_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
<input type="number" class="form-control" id="special_price" name="special_price" placeholder="" required
readonly>
</div>
<div class="form-group col-md-3">
<label for="special_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
<input type="number" class="form-control" id="special_total_price" name="special_total_price"
placeholder="" required readonly>
</div>
<input type="hidden" class="form-control" id="special_service_charge" name="special_service_charge" placeholder="" required readonly>
</div>
<div id="courtesy_price_container" class="displayNone">
<h3 style="padding-top: 100px !important">Boletas obsequio</h3>
<div class="form-group col-md-3">
<label for="courtesy_amount" class="ul-form__label">@lang('messages.flash_ticket.title_11')</label>
<div class="input-group spinner" id="spinner_courtesy">
<input type="text" class="form-control" value="0" id="courtesy_amount"
name="courtesy_amount" onkeyup="calculateRelativeTotal(this.id);" minvalue="0"
style="width: auto;" pattern="[0-9]" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div class="form-group col-md-3">
<label for="courtesy_text">{{ Lang::get('messages.flash_ticket.title_13') }}</label>
<select class="form-control" id="courtesy_text" name="courtesy_text" required>
<option value="0" disabled selected>@lang('messages.select')</option>
@forelse ($ticketTags as $ticketTag)
<option value="{{ $ticketTag->name }}">{{ $ticketTag->name }}</option>
@empty
<option value="">No hay etiquetas</option>
@endforelse
</select>
</div>
<div class="form-group col-md-3">
<label for="courtesy_price" class="ul-form__label">@lang('messages.flash_ticket.title_12')</label>
<input type="number" class="form-control" id="courtesy_price" name="courtesy_price" placeholder=""
required readonly>
</div>
<div class="form-group col-md-3">
<label for="courtesy_total_price" class="ul-form__label">@lang('messages.flash_ticket.title_14')</label>
<input type="number" class="form-control" id="courtesy_total_price" name="courtesy_total_price"
placeholder="" required readonly>
</div>
<input type="hidden" class="form-control" id="courtesy_service_charge" name="courtesy_service_charge" placeholder="" required readonly>
</div>
<div id="total_container" class="displayNone">
<div class="form-group col-md-6 available-tickets">
<h3 id="available_tickets"></h3>
</div>
<div class="form-group col-md-3">
</div>
<div class="form-group col-md-3 prices">
<h3 id="sub_total">Subtotal: $0</h3>
<h3 id="service_charge">Servicio: $0</h3>
<h2 id="total">Total: $0</h2>
</div>
</div>
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enviar boletas por correo</h5>
</div>
<div class="modal-body">
<form onsubmit="sendTicketByEmail(event)">
@csrf
<div class="row">
<div class="form-group col-6 col-md-6">
<label for="email_address"> Correo electrónico </label>
<input id="email_address" type="email" placeholder="pepito.perez@gmail.com"
class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
name="email_address" value="{{ old('email') }}" required>
</div>
<div class="form-group col-6 col-md-6">
<label for="confirm_email_address"> Confirmar correo electrónico </label>
<input id="confirm_email_address" type="email" placeholder="pepito.perez@gmail.com"
class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
name="confirm_email_address" value="{{ old('email') }}" required>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 buttons">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
onclick="reloadPage()"> Cancelar </button>
<button type="submit" class="btn btn-success"> Enviar </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="whatsappModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enviar boletas por WhatsApp</h5>
</div>
<div class="modal-body">
<form onsubmit="sendTicketByWhatsApp(event)">
@csrf
<div class="row">
<div class="form-group col-6 col-md-6">
<label for="whatsappNumber">Número de WhatsApp</label>
<div class="phone-wrapper">
<input id="dial-code" name="dial_code" type="hidden">
<input id="country-code" name="country_code" type="hidden">
<input id="phone" name="phone" type="tel" required class="form-input only-numbers"
pattern="[0-9]{7,15}" title="Ingrese solo números (mínimo 7 y máximo 15 dígitos).">
</div>
</div>
<div class="form-group col-6 col-md-6">
<label for="whatsappNumberConfirmation">Confirmar número de WhatsApp</label>
<div class="phone-wrapper">
<input id="dial-code-confirmation" name="dial_code-confirmation" type="hidden">
<input id="country-code-confirmation" name="country_code-confirmation" type="hidden">
<input id="phone-confirmation" name="phone-confirmation" type="tel" required class="form-input only-numbers"
pattern="[0-9]{7,15}" title="Ingrese solo números (mínimo 7 y máximo 15 dígitos).">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 buttons">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
onclick="reloadPage()"> Cancelar </button>
<button type="submit" class="btn btn-success"> Enviar </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer displayNone" id="div_footer">
<button onClick="buyTickets({{ $parameters }})" type="button"
class="btn btnBox pull-right buttonBuy">{{ Lang::get('messages.tickets.title_27') }}</button>
</footer>
<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/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
<script src="{{ asset('js/flash_ticket_selling.js') . '?v=' . time() }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.spinner .btn:first-of-type').on('click', function() {
spinnerId = $(this).parent().parent().attr('id');
input = $('#' + spinnerId + ' input');
val = input.val();
if (!val) {
val = 0;
}
input.val(parseInt(val, 10) + 1);
calculateRelativeTotal(input[0].id);
});
$('.spinner .btn:last-of-type').on('click', function() {
spinnerId = $(this).parent().parent().attr('id');
input = $('#' + spinnerId + ' input');
val = input.val();
if (!val) {
val = 0;
}
if (parseInt(input.val(), 10) > 0) {
input.val(parseInt(input.val(), 10) - 1);
}
calculateRelativeTotal(input[0].id);
});
$('#emailConfirmation').on('paste', function(e) {
e.preventDefault();
$(this).val('');
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const select = document.getElementById("event_select");
const savedValue = localStorage.getItem("event_select");
if (savedValue) {
select.value = savedValue;
select.dispatchEvent(new Event("change"));
}
select.addEventListener("change", function() {
localStorage.setItem("event_select", this.value);
});
localStorage.setItem("seller_user_id", "{{ Auth::user()->rol_id != 1 ? Auth::user()->id : null }}");
});
function openTickets() {
const select = document.getElementById("event_select");
const event = select.value;
const eventId = event ? JSON.parse(event).match_event_id : null;
if (!eventId || eventId === "0") {
swal("Advertencia", "Por favor selecciona un evento", "warning");
return;
}
const url = `/events/tickets/${eventId}/info`;
window.open(url, "_blank");
}
</script>
@endsection