@extends('checkout.masterBuyPrueba')

@section('title', 'Comprar')

@section('content')
    <div style="margin-bottom:3rem;box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);border:transparent;" class="card">
        <div style="background:white;" class="card-body login-card-body">
            <p class="login-box-msg">
                <b style="color:black;">{{ $evento->nombre }}</b> <br> <a style="color:black;">{{ date('d/m/y', strtotime($evento->fecha))}} - {{ date('H:i', strtotime($evento->fecha))}}hs</a>
                @if($rrpp != null)
                    Invitado por <b>{{$rrpp->name}}</b>
                @endif
            </p>
            {{ Form::open(['route' => ['checkout', Hashids::encode($evento->id, time())], 'method'=>'POST', 'id'=>'myForm']) }}
            {{ csrf_field() }}
            <div class="input-group mb-3">
                {{ Form::text('name', null, ['required' => "required", 'placeholder' => 'Tu Nombre y Apellido', 'class'=>'form-control']) }}
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-user fa-lg"></span>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                {{ Form::select('codigo', $ddCodigos , 549, ['required' => 'required', 'class' => 'form-control']) }}
                {{ Form::text('telefono', null, ['required' => "required", 'placeholder' => 'Tu Celular','style'=>'width:10.5rem', 'class'=>'form-control']) }}
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fa-solid fa-mobile-screen-button fa-lg"></span>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                {{ Form::email('email', null, ['required' => "required", 'placeholder' => 'Tu Email', 'class'=>'form-control']) }}
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-envelope fa-lg"></span>
                    </div>
                </div>
            </div>
            @if($evento->documento)
                <div class="input-group mb-3">
                    {{ Form::text('documento', null, ['required' => "required", 'placeholder' => 'Tu Documento', 'class'=>'form-control']) }}
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fa-solid fa-id-card fa-lg"></span>
                        </div>
                    </div>
                </div>
            @endif
            <div class="input-group mb-3">
                {{ Form::select('entrada_id', $ddEntradas , null, ['required' => 'required', 'class' => 'form-control', 'placeholder'=>'Seleccione el Tipo de Entrada'], $ddHabilitadas) }}
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fas fa-ticket fa-lg"></span>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                {{ Form::select('cantidad', [1=>'1 Entrada',2=>'2 Entradas', 3=>'3 Entradas', 4=>'4 Entradas'] , 1, ['required' => 'required', 'class' => 'form-control', 'id'=>'cantidad']) }}
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fa-solid fa-hashtag fa-lg"></span>
                    </div>
                </div>
            </div>
            <div id="agregar">

            </div>
            <p>
                <a href="#" class="link-black text-sm mr-2" data-toggle="modal" data-target="#ayuda"><i class="fa-solid fa-circle-info mr-1"></i><b>Recordá que las entradas se envían por Whatsapp a los numeros de teléfono registrados.</b></a>
            </p>
            <div class="row">
                <div class="col-12">
                    @if($evento->entradasCantidadTotal() > count($evento->invitadosConfirmados) && $evento->act)
                        @if(!$evento->free)
                            @if($evento->mp)
                                {{form::submit('Pagar con Mercado Pago (+ 9% Fee)', array('name'=>'action', 'style'=>'margin-top: 10px;background-color: #343a40;color: white;box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);','class'=> 'btn btn-outline-secondary btn-md btn-block border-white border-2', 'id'=>'pagarMP'))}}
                                <br>
                            @endif
                            @if($evento->transferencia)
                                {{form::submit('Pagar con Transferencia', array('name'=>'action','style'=>'margin-top: 10px;background-color: #343a40;color: white;box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);', 'class'=> 'btn btn-outline-secondary btn-md btn-block border-white border-2', 'id'=>'pagarTr'))}}
                            @endif
                        @else
                            {{form::submit('Confirmar Invitación', array('name'=>'action', 'class'=> 'btn btn-outline-secondary btn-md btn-block'))}}
                        @endif
                    @else
                        <button class="btn btn-outline-secondary btn-block" disabled>Evento Completo</button>
                    @endif
                </div>
            </div>
            {{ Form::close() }}
            <br>
            <p class="mb-1">
                <a href="#" data-toggle="modal" data-target="#ayuda">Más Información</a>
            </p>
        </div>
    </div>

    <script>
    document.getElementById('cantidad').onchange = function() {
        var cantidad = this.value;
        document.getElementById('agregar').innerHTML = '';
        if(cantidad > 1){
            var limite = parseInt(cantidad ,10) + 1;
            for (var i = 2; i < limite; i++) {
                inicio = "<div class='input-group mb-3'>";
                codigoNombre = "<input required='required' placeholder='Nombre y Apellido - Entrada "+i+"' class='form-control' name='name_"+i+"' type='text'</input>";
                finNombre = "<div class='input-group-append'><div class='input-group-text'><span class='fas fa-user fa-lg'></span></div></div></div>";
                codigoArea = "<select required='required' class='form-control' name='codigo_"+i+"'>"
                @foreach ($ddCodigos as $key => $codigo)
                @if($key != "549")
                +"<option value='{{$key}}'>{{$codigo}}</option>"
                @else
                +"<option value='{{$key}}' selected='selected'>{{$codigo}}</option>"
                @endif
                @endforeach
                +"</select>";
                codigoCelular = "<input required='required' placeholder='Celular - Entrada "+i+"' class='form-control' name='telefono_"+i+"' type='text'</input>";
                finCelular = "<div class='input-group-append'><div class='input-group-text'><span class='fa-solid fa-mobile-screen-button fa-lg'></span></div></div></div>";
                document.getElementById('agregar').innerHTML += inicio + codigoNombre + finNombre + inicio + codigoArea + codigoCelular + finCelular;
            }
        }
    }
    </script>

    <!-- Ayuda Modal -->
    <div class="modal fade" id="ayuda" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content bg-dark">
                <div class="modal-header">
                    <h5 class="modal-title">Más Información</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5><b>Cómo Compro mi Entrada?</b></h5>
                    <p>
                        Ingresá tu nombre y apellido, tu celular con código de país y área Ej: 54 911 1234 1234 (Tu número de Whatsapp), tu email y elegí tu entrada.
                        <br>
                        Luego clickea sobre "Pagar", te redigiremos a Mercado Pago para que puedas pagar con tu tarjeta de crédito, débito o con dinero en tu cuenta.
                    </p>
                    <h5><b>MP Fee</b></h5>
                    <p>
                        El <b>Mercado Pago Fee</b> es del <b>9%</b> sobre el valor de la entrada.
                    </p>
                    <h5><b>Ya compré, ahora?</b></h5>
                    <p>
                        Dentro de las 24hs que realizaste tu compra, te enviaremos un mesaje de Whatsapp con tu entrada QR y más información sobre el evento.
                        Cada entrada es individual y se envian individualmente.
                    </p>
                    <h5><b>Consideraciones</b></h5>
                    <p>
                        Eventos para mayores de 25 años.
                        <br>
                        Está prohibido fumar cigarrillo en el establecimiento.
                        <br>
                        El establecimiento se reserva el derecho de admisión y permanencia.
                    </p>
                    <h5><b>Cambios o Devoluciones</b></h5>
                    <p>
                        No se permiten cambios o devoluciones de Entradas.
                        <br>
                        El Cliente acepta que los datos del Evento, número de Entradas, ubicaciones, valor de las entradas, fechas y horas del Evento, han sido revisadas por él y la información ingresada al sistema es de su responsabilidad.
                    </p>
                    <h5><b>Tengo más dudas!</b></h5>
                    <p>Si te quedaron dudas o tenés algún problema, hablá con nuestro equipo haciendo click en el botón de Whatsapp, abajo a la derecha de la pantalla.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" style="box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.querySelector("#myForm").addEventListener("submit", function(e){
        document.getElementById("pagarMP").disabled = true;
        //document.getElementById("pagarTr").disabled = true;
    });
    </script>
@endsection