@extends('evento2')
@section('content')
<section class="py-0">
    <div class="container text-black">
        <h4>Reservar ahora</h4>
        <br>
        <form method="POST" action="{{ route('detalle.entradas') }}">
            @csrf
            <input hidden name="eventoId" value="{{ Crypt::encrypt($evento->id) }}">
            <table class="table table-responsive">
                <tbody>
                    @php
                    $i = 0;
                    @endphp
                    @php
                        //Obtenemos fecha actual
                    $fechaActual = date('Y-m-d');
                        //Procedemos a separarlos para sumar los numeros de cada una
                    $fechaActualArray = explode("-", $fechaActual);
                    $cantidadFechaActual = ($fechaActualArray[0]*1000) + ($fechaActualArray[1]*100) + $fechaActualArray[2];
                    @endphp
                    {{--{{$cantidadFechaActual}}--}}
                    @foreach ($evento->entradas as $entrada)
                    <!--Condicionamos que aparezcan solamente las entradas más cercanas a la fecha-->
                        @php
                        //Obtenemos fecha inicial
                        $fechaInicial = $entrada->disponibilidad_fecha_inicio;
                        //Procedemos a separarlos para tener solamente la fecha en dias
                        $separarFechaInicialHora = explode(" ", $fechaInicial);
                        //Ahora separamos los numeros y los sumamos en seguida
                        $fechaInicialArray = explode("-", $separarFechaInicialHora[0]);
                        $cantidadFechaInicial = ($fechaInicialArray[0]*1000) + ($fechaInicialArray[1]*100) + $fechaInicialArray[2];
                        //Obtenemos fecha final
                        $fechaFinal = $entrada->disponibilidad_fecha_fin;
                        //Procedemos a separarlos para tener solamente la fecha en dias
                        $separarFechaFinalHora = explode(" ", $fechaFinal);
                        //Ahora separamos los numeros y los sumamos en seguida
                        $fechaFinalArray = explode("-", $separarFechaFinalHora[0]);
                        $cantidadFechaFinal = ($fechaFinalArray[0]*1000) + ($fechaFinalArray[1]*100) + $fechaFinalArray[2];
                        @endphp
                        @if(($cantidadFechaActual >= $cantidadFechaInicial) && ($cantidadFechaActual <= $cantidadFechaFinal))
                    <tr>
                        <td style="width: 5%">
                            <div class="quantity">
                                <input name="cantidadEntradas[]" id="cantidadEntradaId" type="number" min="0"
                                max="9" step="1" value="0" onchange="obtenerTotal()">
                            </div>
                        </td>
                        <td style="text-align:left">
                            {{ $entrada->nombre }}<br>
                            {{ $entrada->descripcion }}<br>
                            <!--Se tiene que recorrer las entradas vendidas en detalle de venta-->
                            {{--{{$cantidadFechaInicial}} <br>
                            {{$cantidadFechaFinal}} <br>--}}
                            @php
                            $entradasVendidas = 0;
                            @endphp
                            @foreach($entrada->detallesVentas as $detalleVenta)
                            @php
                            $entradasVendidas = $entradasVendidas + $detalleVenta->cantidad;
                            @endphp
                            @endforeach
                            @if($entrada->cantidad_entradas > $entradasVendidas)
                            Cantidad disponible: {{$entrada->cantidad_entradas-$entradasVendidas}}
                            @else
                            Entradas Agotadas
                            @endif
                            <br>

                            Disponibilidad: Del 16/05/2022 al 26/05/2022 11:00:00 p. m.
                            <input class="form-control" type="hidden" value="{{ $entrada->id }}"
                            name="entradaId[]" id="entradaId{{ $entrada->id }}" maxlength="100">
                        </td>
                        <td style="text-align:right;" align="right" valign="bottom">
                            ${{ number_format($entrada->precio, 2) }}<br>
                            <input id="precioEntrada{{ $entrada->id }}" type="hidden"  name="precioEntrada[]"
                            value={{ $entrada->precio }} />
                            <input name="precioEntradad[]" type="hidden"   id="precioEntradad{{ $entrada->id }}"
                            value={{ $entrada->precio }} />
                            <br>
                        </td>

                    </tr>
                    <tr align="right">

                        <td colspan="3">
                            <input id="cupon{{ $entrada->id }}" style="width:20%; align:right"
                            class="form-control" placeholder="Tengo un cupon" name="cupon[]" type="text"
                            onchange="obtenerDatosCupon(this)" />
                        </td>
                    </tr>
                    @endif <!--Fin de la condicion de las entradas disponibles proximas-->
                    @endforeach
                    <tr>
                        <td style="text-align:right" colspan="3">
                            <label>Total</label>
                            <label id="totalPrecio">$0.00</label>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right" colspan="3">

                            <button type="submit" type="button" class="btn  text-white"
                            style="background-color: #E96712;">Continuar</button>

                        </td>
                    </tr>
                </tbody>

            </table>

        </form>
    </div>
</section>
@endsection
<script></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
    .quantity {
        position: relative;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    .quantity input {
        width: 45px;
        height: 42px;
        line-height: 1.65;
        float: left;
        display: block;
        padding: 0;
        margin: 0;
        padding-left: 20px;
        border: 1px solid #eee;
    }

    .quantity input:focus {
        outline: 0;
    }

    .quantity-nav {
        float: left;
        position: relative;
        height: 42px;
    }

    .quantity-button {
        position: relative;
        cursor: pointer;
        border-left: 1px solid #eee;
        width: 20px;
        text-align: center;
        color: #333;
        font-size: 13px;
        font-family: "Trebuchet MS", Helvetica, sans-serif !important;
        line-height: 1.7;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .quantity-button.quantity-up {
        position: absolute;
        height: 50%;
        top: 0;
        border-bottom: 1px solid #eee;
    }

    .quantity-button.quantity-down {
        position: absolute;
        bottom: -1px;
        height: 50%;
    }

</style>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    jQuery(
        '<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>'
        )
    .insertAfter('.quantity input');
    jQuery('.quantity').each(function() {
        var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });

        btnDown.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });

    });

    function obtenerTotal() {


        let montoTotal = 0;

        var numEntradasCount = document.getElementsByName("cantidadEntradas[]").length;

        for (i = 0; i < numEntradasCount; i++) {

            cantidadEntradas = document.getElementsByName("cantidadEntradas[]")[i].value;
            if (cantidadEntradas) {
                precioEntrada = document.getElementsByName("precioEntradad[]")[i].value;
                montoTotal += (cantidadEntradas * precioEntrada);

            }
        }
        $("#totalPrecio").text("$ " + montoTotal.toFixed(2) + "MXN");
    }

    async function obtenerDatosCupon(input) {
        /* console.log(input.id.replace('cupon', '')); */
        //let precioEntradasCount = document.getElementsByName("precioEntrada[]").length;
        let precioEntrada = 0;
        let precioDescuento = 0;
        let idCupon = input.id.replace('cupon', '');
        precioEntrada = document.getElementById("precioEntrada" + idCupon).value;
        entradaId = document.getElementById("entradaId" + idCupon).value;
        cupon = document.getElementById("cupon" + idCupon).value;



        if (cupon != "") {
            try {
                await getCupon(precioEntrada, cupon, entradaId, idCupon);

            } catch (error) {
                console.log(error);
            }
        } else {
            document.getElementById("precioEntradad" + idCupon).value = document.getElementById("precioEntrada" +
                idCupon).value;
            Swal.fire({
                icon: 'warning',
                title: 'Sugerencia',
                text: 'Se ha retirado el cupon',
                footer: ''
            })
            obtenerTotal();
            return;
        }
    }

    function getCupon(precioEntrada, cupon, entradaId, idCupon) {
        return $.ajax({
            type: "GET",
            url: "{{ url('cupon') }}/" + cupon,
            data: {
                entradaId: entradaId
            },
            success: function(response) {
                if (response.status == 404) {
                    console.log(JSON.stringify(response));
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: response.message,
                        footer: ''
                    })

                    document.getElementById("cupon" + idCupon).value = '';
                    return;
                } else {

                    let precioDescuento = precioEntrada * (1 - (response.cupon.porcentaje / 100));
                    document.getElementById("precioEntradad" + idCupon).value = precioDescuento;
                    Swal.fire({
                        icon: 'success',
                        title: 'OK',
                        text: response.message,
                        footer: ''
                    })
                    obtenerTotal();
                    return;

                }
                // precioEntrada =data.porcentaje;

            }
        });
    }
</script>