@extends('checkout.master')

@section('title', "Entrada Invalida")

@section('content')
    <div class="card">
        <div class="card-body login-card-body">
            <h4 class="login-box-msg"><b>Entrada Invalida</b></h4>
                <p class="login-box-msg">
                <b>Este Ticket no es valido,</b> si tenes alguna duda comunicate con nosotros!
            </p>
            <p class="mb-1">
                <a href="#" data-toggle="modal" data-target="#ayuda">Tengo Dudas</a>
            </p>
        </div>
    </div>

    <!-- Ayuda Modal -->
    <div class="modal fade" id="ayuda" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ayudaModalLabel">Ayuda</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fa-solid fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5><b>Donde es?</b></h5>
                    <p>
                        La direccion del evento se hará visible en tu entrada QR 12hs antes su comienzo.
                    </p>
                    <h5><b>¿Que es mi saldo?</b></h5>
                    <p>
                        Tu entrada QR también funciona como billetera virtual. Le podes cargar saldo en una de nuestras cajas y luego usarlo durante el evento.
                    </p>
                    <h5><b>¿Puedo comprar sin hacer fila en la caja?</b></h5>
                    <p>
                        Sí, abrí tu QR durante el evento, hace click en comprar de la carta, elegí lo que quieras y luego podes pagar con Mercado Pago o con saldo que tengas en tu billetera virtual.
                    </p>
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <button type="button" class="btn btn-outline-secondary btn-block" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .scroll-button {
            position: fixed;
            bottom: 40px;
            right: 20px;
            background-color: #f8f9fa;
            border-color: #ddd;
            color: #444;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1000;
        }

        .scroll-button a {
            text-decoration: none;
            border-color: #ddd;
            border: 10px;
            color: #444;
            font-weight: bold;
        }
    </style>
@endsection