@extends('auth.master')

@section('title', 'Comprar')

@section('pixel', $evento->pixel)

@section('content')

    <div class="card">
        <div class="card-body login-card-body">

            <p class="login-box-msg">
                <b>{{ $evento->nombre }}</b> <br> {{ date('d/m/y', strtotime($evento->fecha))}} - {{ date('H:i', strtotime($evento->fecha))}}hs
                @if($rrpp != null)
                    <br>Invitado por <b>{{$rrpp->name}}</b>
                @endif
            </p>
            @if ($evento->mapa != null)
                <img src="{{URL::asset($evento->mapa)}}" class="img-fluid mb-2" alt="" style="width:750px !important">
            @endif
            @if($rrpp == null)
                {{ Form::open(['route' => ['checkoutMulti', [Hashids::encode($evento->id, time())]], 'method'=>'POST', 'id'=>'myForm']) }}
            @else
                {{ Form::open(['route' => ['checkoutMulti', [Hashids::encode($evento->id, time()), Hashids::encode($rrpp->id, time())]], 'method'=>'POST', 'id'=>'myForm']) }}
            @endif
            {{ csrf_field() }}

            <table id="productos" class="table table-hover table-striped nowrap" style="width:100%">
                <tbody>
                    @foreach ($entradas as $key => $entrada)
                        <tr>
                            <td style="vertical-align: middle;">
                                {{ $entrada->nombre}}
                                <br>
                                <small>Incluye {{ $entrada->multiplo }} Tickets</small>
                            </td>
                            <td style="vertical-align: middle;">
                                ${{ number_format($entrada->valor, 0, ',', '.')}}
                            </td>
                            <td style="vertical-align: middle; white-space: nowrap;">
                                @if($entrada->max > 0)
                                    {{ Form::number('cantidad_'.$entrada->id, 0, ['min'=>0, 'max'=>$entrada->max, 'required' => 'required', 'class'=>'form-control cantidad', 'style'=>'width: 60px;', 'data-multiplo'=>$entrada->multiplo, 'data-valor'=>$entrada->valor]) }}
                                @else
                                    Sold Out
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <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', '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
            @if(count($evento->codigos))
                <div class="input-group mb-3">
                    {{ Form::text('codigo_promo', null, ['placeholder' => 'Código Promoción', 'class'=>'form-control']) }}
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fa-solid fa-percent fa-lg"></span>
                        </div>
                    </div>
                </div>
            @endif
            <p class="lead mb-2">
                <b><span id="totalEntradas">0</span></b> Tickets por <b>$<span id="totalImporte">0</span></b>
            </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 (+ 9% Fee)', array('name'=>'action', 'class'=> 'btn btn-outline-secondary btn-md btn-block', 'id'=>'pagarMP')) }}
                                <br>
                            @endif
                            @if($evento->transferencia)
                                {{ form::submit('Pagar con Transferencia', array('name'=>'action', 'class'=> 'btn btn-outline-secondary btn-md btn-block', '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() }}
            <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 al numero de teléfono registrado.</b></a>
            </p>
            <p class="mb-1">
                <a href="#" data-toggle="modal" data-target="#ayuda">Más Información</a>
            </p>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const qtyInputs = document.querySelectorAll('.cantidad');
        const totalEntradasEl = document.getElementById('totalEntradas');
        const totalImporteEl  = document.getElementById('totalImporte');
        const totalImporteWrap = document.getElementById('totalImporteWrap');

        const pagarBtns = [
            document.getElementById('pagarMP'),
            document.getElementById('pagarTr')
        ].filter(Boolean);

        // Show money total only if we actually have price info in the inputs
        const hasPrice = [...qtyInputs].some(i => i.dataset.valor);
        if (hasPrice && totalImporteWrap) totalImporteWrap.style.display = '';

        function recalc() {
            let totalEntradas = 0;
            let totalImporte  = 0;

            qtyInputs.forEach(inp => {
                const qty      = parseInt(inp.value, 10) || 0;
                const multiplo = parseInt(inp.dataset.multiplo, 10) || 1;
                const valor    = parseInt(inp.dataset.valor, 10) || 0; // price per table

                totalEntradas += qty * multiplo;
                totalImporte  += qty * valor;
            });

            totalEntradasEl.textContent = totalEntradas;

            if (hasPrice && totalImporteEl) {
                totalImporteEl.textContent = totalImporte.toLocaleString('es-AR');
            }

            // Optional: disable pay buttons if no tickets selected
            pagarBtns.forEach(btn => { btn.disabled = (totalEntradas === 0); });
        }

        // Recalc on any change / typing
        document.addEventListener('input', (e) => {
            if (e.target.classList && e.target.classList.contains('cantidad')) recalc();
        });

        // Initial state
        recalc();
    });
</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">
            <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 12hs 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.
                </p>
                <h5><b>Consideraciones</b></h5>
                <p>
                    Está prohibido fumar cigarrillo en el establecimiento.
                    <br>
                    El establecimiento se reserva el derecho de admisión y permanencia.
                </p>
                <h5><b>Código de Vestimenta</b></h5>
                <p>
                    No se permitirá ingreso con bermudas, shorts o remeras sin mangas.
                </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" 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