@extends('checkout.master')

@section('title', $userEvento->evento->nombre)

@section('icon', $userEvento->evento->imagen)

@section('content')
    <div class="card">
        <div class="card-body login-card-body">
            @if($userEvento->evento->act)
                <p class="login-box-msg">
                    {{ $userEvento->user->nickname() }}, aca esta tu entrada!
                </p>
                <h4 class="login-box-msg"><b>{{ $userEvento->entrada->nombre }}</b></h4>
                    <p class="login-box-msg">
                    <b>{{@$userEvento->evento->nombre}}</b>
                    <br>
                    {{ date('d/m - H:i', strtotime($userEvento->evento->fecha))}}
                </p>
                <img class="rounded"  src="{{$qr}}" style="display: block; margin-left: auto;margin-right: auto; width: 75%;border: white 3px solid;">
                <h3 class="login-box-msg" style="color:rgb({{$userEvento->evento->color->r}}, {{$userEvento->evento->color->g}}, {{$userEvento->evento->color->b}}); opacity: {{$userEvento->evento->color->t}}%;"><b>{{@$userEvento->user->hash}}</b></h3>

                @if($userEvento->evento->direccion_publica)
                    <p class="login-box-msg">Direccion: <a href="{{$userEvento->evento->direccion_url}}"><b>{{$userEvento->evento->direccion}}</b></a></p>
                @else
                    @if(strtotime(date('Y-m-d H:i:s')) >= (strtotime($userEvento->evento->fecha) - (12*60*60)))
                        <p class="login-box-msg">Direccion: <a href="{{$userEvento->evento->direccion_url}}"><b>{{$userEvento->evento->direccion}}</b></a></p>
                    @endif
                @endif
                @if(strtotime(date('Y-m-d H:i:s')) >= (strtotime($userEvento->evento->fecha) - (12*60*60)) && $userEvento->evento->carta)
                    <p class="login-box-msg">Saldo: <b>${{ $userEvento->user->saldo() }}</b></p>
                @endif
                @if(strtotime(date('Y-m-d H:i:s')) >= (strtotime($userEvento->evento->fecha)) && $userEvento->evento->carta)
                    <button type="button" class="btn btn-outline-secondary btn-block btn-lg" data-toggle="modal" data-target="#carta">Comprar de la Carta</button>
                    <br>
                @endif
                @if(0)
                    {{ Html::linkRoute('entrada.menu', 'Menú', Hashids::encode($userEvento->id, time()), array('class' => 'btn btn-outline-secondary btn-block')) }}
                    <br>
                @endif

                @if(count($userEvento->comandasPendientes()))
                    <table id="productos" class="table table-hover table-striped nowrap" style="width:100%">
                        <tbody>
                            @foreach ($userEvento->comandasPendientes() as $keyy => $comnada)
                                <tr>
                                    <td style="vertical-align: middle; white-space: nowrap;">
                                        {{ $comnada->cantidad }} x {{ $comnada->producto->nombre }}
                                    </td>
                                    <td style="vertical-align: middle;">
                                        @if($comnada->estado_id == 0)
                                            Pago Pendinete
                                        @else
                                            {{ $comnada->estado->nombre }}
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <br>
                @endif
            @else
                <p class="login-box-msg">
                    {{ $userEvento->user->nickname() }}, gracias por venir a <b>{{@$userEvento->evento->nombre}}</b>, te esperamos la proxima!
                </p>
            @endif
            <p class="mb-1">
                <a href="#" data-toggle="modal" data-target="#ayuda">Tengo Dudas</a>
            </p>
        </div>
    </div>

    <!-- Carta Modal -->
    <div class="modal fade" id="carta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="border border-5 border-dark scroll-button">
            <a href="#formulario" class="fa-solid fa-solid fa-arrow-down fa-lg"></a>
        </div>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Comprar de la Carta</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">
                    {{ Form::open(['route' => ['entrada.carta.checkout', Hashids::encode($userEvento->id, time())], 'method'=>'POST']) }}
                    @foreach ($categorias  as $key => $categoria)
                        @if(count($categoria->productos) > 0)
                            <h4>{{$categoria->nombre}}</h4>
                            <table id="productos" class="table table-hover table-striped nowrap" style="width:100%">
                                <tbody>
                                    @foreach ($categoria->productos as $keyy => $producto)
                                        <tr>
                                            <td style="vertical-align: middle; white-space: nowrap;">
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default" onclick="restar('{{$producto->id}}', '{{$producto->precio($userEvento->evento_id)}}');">
                                                        <i class="fa-solid fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-default">
                                                        {{ Form::text('cantidad_'.$producto->id, 0, ['min'=>0, 'size'=>1, 'id'=>"cantidad_".$producto->id]) }}
                                                    </button>
                                                    <button type="button" class="btn btn-default" onclick="sumar('{{$producto->id}}', '{{$producto->precio($userEvento->evento_id)}}');">
                                                        <i class="fa-solid fa-plus"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                {{ $producto->nombre." - $".number_format($producto->precio($userEvento->evento_id), 0, '', '.') }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <br>
                        @endif
                    @endforeach
                    <p>Total: <b>$ </b><b id="total">0</b></p>
                    <hr>
                    <div id="formulario" class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            {{ Form::submit('Siguiente', array('class'=> 'btn btn-outline-success btn-block btn-lg')) }}
                            {{ Form::close() }}
                        </div>
                    </div>
                    <br>
                    <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 btn-lg" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    function restar(id, valor) {
        var num = document.getElementById("cantidad_"+id).value;
        if(num != 0){
            document.getElementById("cantidad_"+id).value = parseInt(num ,10) - 1;

            var total = document.getElementById("total").textContent;
            document.getElementById('total').innerHTML = '';
            document.getElementById("total").textContent = parseInt(total ,10) - parseInt(valor ,10);
        }
    }
    function sumar(id, valor) {
        var num = document.getElementById("cantidad_"+id).value;
        document.getElementById("cantidad_"+id).value = parseInt(num ,10) + 1;

        var total = document.getElementById("total").textContent;
        document.getElementById('total').innerHTML = '';
        document.getElementById("total").textContent = parseInt(total ,10) + parseInt(valor ,10);
    }
    </script>

    <!-- Carta Modal -->
    <div class="modal fade" id="saldo" 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">Cargar Saldo</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">
                    {{ Form::open(['route' => ['entrada.saldo.cargar', Hashids::encode($userEvento->id, time())], 'method'=>'POST']) }}

                    {{ Form::label('', "Monto", ['style'=>'font-weight: bold;']) }} *
                    {{ Form::number('monto', 0, ['required' => 'required', 'class'=>'form-control']) }}
                    <hr>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            {{ Form::submit('Cargar con Mercado Pago', array('class'=> 'btn btn-outline-success btn-block btn-lg')) }}
                            {{ Form::close() }}
                        </div>
                    </div>
                    <br>
                    <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 btn-lg" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </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>
                    <small>{{ $userEvento->id }}</small>
                    <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