@extends('evento2')
@section('content')
<div class="container my-2 text-black">
    <div class="row justify-content-center">
        <div class="alert alert-primary" role="alert">
            Tiene <span id="countdown"> </span> minutos para completar su pedido. Una vez que finaliza el cronómetro,
            los boletos seran liberados
        </div>
    </div>
    @isset($error)
    <div class="alert alert-danger">
        <ul class="m-0">
            <li>{{ $error }}</li>
        </ul>
    </div>
    @endisset
    {{-- @foreach ($boletos as $boleto)
    <ul>
        <li>{{$boleto}}</li>
    </ul>
    @endforeach --}}
    <div class="row">
        @guest
        <div class="col-md-9 pl-2 py-2 text-black">
            <h5>Información de Contacto</h5>
            <p>Inicia sesión con tu cuenta de Boletia o continua como invitado.</p>
            <center>
                <button data-bs-toggle="modal" data-bs-target="#loginModal"
                    style="border-color:#296EFD; background-color:#296EFD; color:white;" class=" btn  btn-lg "
                    tabindex="-1" role="button">Inicia sesión con tu cuenta</button>
            </center>
            <!-- Button trigger modal -->
        </div>
        @endguest

        <div class="col-md-3  pl-5 py-2">
            <div class="card">
                <div class="card-header">
                    Resumen de tu compra
                </div>
                <div class="card-body">
                    <div class="row">
                        <table>
                            @foreach ($entradas as $entrada)
                            <tr>
                                <td>{{ $entrada['cantidad'] }}x {{ $entrada['nombre'] }}</td>
                                <td style="text-align: right">$
                                    {{ number_format($entrada['cantidad'] * $entrada['precio'], 2) }}
                                    MXN
                                    <br>

                                </td>

                                <td>
                                    <hr>
                                </td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <hr style="color:white col-sm-8">
    <form method="POST" action="#" id="form">
        @csrf

        <div class="row">
            @guest
            <div class="card col-sm-6 text-black">
                <div class="card-body ">
                    <h5 class="card-title">Continuar como invitado</h5>

                    <div class="row">
                        <div class="col-sm-6 md-3">
                            <label for="exampleInputEmail1" class="form-label">Nombre</label>
                            <input type="text" class="form-control" aria-describedby="emailHelp" id="nombreInvitado"
                                name="nombreInvitado">

                        </div>
                        <div class="col-sm-6 mb-3">
                            <label for="exampleInputPassword1" class="form-label">Apellidos</label>
                            <input type="text" class="form-control" name="apellidosInvitado" id="apellidosInvitado">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 md-3">
                            <label for="exampleInputEmail1" class="form-label">Email</label>
                            <input type="text" class="form-control" aria-describedby="emailHelp" name="emailInvitado"
                                id="emailInvitado">

                        </div>
                        <div class="col-sm-6 md-3">
                            <label for="exampleInputEmail1" class="form-label">Confirme su email *</label>
                            <input type="text" class="form-control" aria-describedby="emailHelp"
                                name="emailConfirmaInvitado" id="emailConfirmaInvitado">

                        </div>
                        <div class="col-md-12 mt-4" id="emailHelp" class="form-text">Nunca compartiremos tu correo
                            electrónico con nadie más.</div>
                        <div class="row mt-3">
                            <div class="col-md-12" style="font-size: 12px;">
                                <span><i class="fa-solid fa-asterisk"></i> Debe tener acceso al correo electrónico ya
                                    que
                                    los boletos se enviarán allí.</span>
                            </div>

                        </div>

                    </div>
                    <div class="row my-4">
                        <div class="col-sm-6 md-3">
                            <label for="exampleInputEmail1" class="form-label">Número de teléfono *</label>
                            <input type="text" class="form-control" aria-describedby="emailHelp" name="telefonoInvitado"
                                id="telefonoInvitado">
                        </div>

                    </div>


                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" name="nuevoUsuario" id="nuevoUsuario"
                            onchange="showPasswordField()" value="1">
                        <label class="form-check-label" for="exampleCheck1">Guarda tus datos para futuras
                            compras.</label>
                    </div>

                    <div class="row" id="div-password" style="display: none;">
                        <div class="mb-3 col-md-6">
                            <label for="exampleInputEmail1" class="form-label">Password</label>
                            <input type="password" class="form-control" aria-describedby="emailHelp"
                                id="passwordInvitado" name="passwordInvitado">
                        </div>
                    </div>


                </div>
            </div>
            @endguest
            <div class="col-md-6">
                <h3>Selecciona tu lugar de preferencia</h3>

                <div class="wrapper">

                    <div class="box box1   m-2">
                        <center>
                            <div style="width:80%;height:50px;background-color: #B2B2B2; ">
                                <center>
                                    Escenario
                                </center>
                            </div>
                        </center>
                    </div>


                    <div class="box box2  m-2">

                        <div class="m-2" id="" onclick="dibujarAsientos(this);" style="background-color:#F6CACA;">
                            <br>
                            <center>
                                P1
                            </center>

                            <br>
                        </div>

                        <div class="m-2" style="background-color:#F6CACA;" onclick="dibujarAsientos(this);">
                            <br>
                            <center>P2</center>
                            <br>
                        </div>

                    </div>
                    <div class="box box3  m-2" id="platinoIzquierda" style="background-color:#E967DC"
                        onclick="dibujarAsientos(this);">
                        <br>
                        <br>
                        <center>ZONA PLATINUM IZQUIERDA</center>
                        <br>
                        <br>

                    </div>
                    <div class="box box4  m-2" id="platinoDerecha" style="background-color:#3460C0"
                        onclick="dibujarAsientos(this);">
                        <br>
                        <br>
                        <center>
                            ZONA PLATINUM DERECHA
                        </center>

                        <br>
                        <br>
                    </div>
                    <div class="box box5  m-2">
                        <div class="m-2" style="background-color:#F6CACA;" onclick="dibujarAsientos(this);">
                            <br>
                            <center>
                                P3
                            </center>

                            <br>
                        </div>
                        <div class="m-2" style="background-color:#F6CACA;" onclick="dibujarAsientos(this);">
                            <br>
                            <center>
                                P4
                            </center>
                            <br>
                        </div>
                    </div>
                    <div id="oroIzquierda" class="box box6  m-2" style="background-color:#1DEB6C"
                        onclick="dibujarAsientos(this);">
                        <br>
                        <br>
                        <center>ZONA ORO IZQUIERDA</center>
                        <br>
                        <br>
                    </div>
                    <div class="box box7  m-2" id="oroDerecha" style="background-color:#F7CD4E"
                        onclick="dibujarAsientos(this);">
                        <br>
                        <br>
                        <center>
                            ZONA ORO DERECHA
                        </center>
                        <br>
                        <br>
                    </div>
                </div>
            </div>
        </div>






        <div class="seatStructure">
            <center>
                <table id="seatsBlock">
                    <tbody id="Asientos">

                    </tbody>

                </table>


            </center>
        </div>



</div>
<div class="col-md-9 pl-2 py-2 text-black">
    <center>
        <button onclick="buy()" type="button" style="border-color:#296EFD; background-color:#296EFD; color:white;"
            class=" btn  btn-lg " tabindex="-1" role="button">Comprar Boletos</button>
    </center>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 style="color:black" class="modal-title" id="exampleModalLabel">Login</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="form-group mt-3">
                    <label style="color:black" for="staticEmail" class="col-form-label">Correo
                        electrónico</label>

                    <input type="email" class="form-control" id="staticEmail" name="email">

                </div>
                <div class="form-group mt-3">
                    <label style="color:black" for="inputPassword" class="col-form-label">Contraseña</label>

                    <input type="password" class="form-control" name="password" id="inputPassword">

                </div>
            </div>

            <div class="row mx-4">
                <div class="col-md-12">
                    <center>
                        <button type="button" onclick="login()" class="btn btn-secondary"
                            style="background-color:#296EFD; color:white;">Login</button>
                    </center>
                </div>

            </div>

            <div class="row mt-2 mx-5">
                <div class="col-md-12">
                    <center>
                        <a href="{{ route('restore-password') }}" type="button" class="btn btn-link">¿Se
                            te olvidó tu contraseña?</a>
                    </center>
                </div>
            </div>


        </div>
    </div>
</div>


</form>
</div>




</div>
@endsection
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
    integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .wrapper {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: 100px;
        grid-auto-columns: 200px;
        color: black;
        font-size: 10px;

    }

    .box1 {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 1;
        grid-auto-rows: 70%;

    }

    .box2 {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;

    }

    .box3 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 2;

    }

    .box4 {
        grid-column-start: 4;
        grid-column-end: 6;
        grid-row-start: 2;
        grid-row-end: 2;

    }

    .box5 {
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 2;

    }

    .box6 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 3;

    }

    .box7 {
        grid-column-start: 4;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 3;

    }
</style>

<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #Username {
        border: none;
        border-bottom: 1px solid;
    }

    .screen {
        width: 100%;
        height: 20px;
        background: #4388cc;
        color: #fff;
        line-height: 20px;
        font-size: 15px;
    }

    .smallBox::before {
        content: ".";
        width: 15px;
        height: 15px;
        float: left;
        margin-right: 10px;
    }

    .greenBox::before {
        content: "";
        background: Green;
    }

    .redBox::before {
        content: "";
        background: Red;
    }

    .emptyBox::before {
        content="";
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
        background-color: #ccc;
    }

    .seats {
        border: 1px solid red;
        background: yellow;
    }



    .seatGap {
        width: 40px;
    }

    .seatVGap {
        height: 40px;
    }

    table {
        text-align: center;
    }


    .Displaytable {
        text-align: center;
    }

    .Displaytable td,
    .Displaytable th {
        border: 1px solid;
        text-align: left;
    }

    textarea {
        border: none;
        background: transparent;
    }



    input[type=checkbox] {
        width: 0px;
        margin-right: 18px;
    }

    input[type=checkbox]:before {
        content: "";
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
        background-color: #ccc;
    }

    input.seatReservado.seats::before {
        content: "";
        width: 15px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(157, 19, 19, 0.8);
        background-color: rgb(255, 5, 5);
    }

    input[type=checkbox]:checked:before {
        background-color: Green;
        font-size: 15px;
    }
</style>


@endpush
@push('js')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
    integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>
<script>
    function showPasswordField() {
            if ($('#nuevoUsuario').is(':checked')) {
                $('#div-password').css('display', 'block');
                $("#passwordInvitado").attr("required", true);
            } else {
                $('#div-password').css('display', 'none');
                $("#passwordInvitado").attr("required", false);
            }
        }

        function login() {
            let url = "{{ route('login-cliente') }}";
            $('#form').attr('action', url);
            if ($('#inputPassword').val().length > 0 && $('#staticEmail').val().length > 0) {
                $("#passwordInvitado").attr("required", false);
                $('#form').submit();
            }else{
                errorEmailPasswordField();
            }
        }

        function buy() {
            let url = "{{ route('boleto.buy') }}";
            $('#form').attr('action', url);
            @guest
            if ($('#nombreInvitado').val().length > 0 && $('#apellidosInvitado').val().length > 0 && $('#emailInvitado')
                .val().length > 0 && $('#emailConfirmaInvitado').val().length > 0 && ($('#emailInvitado')
                    .val() == $('#emailConfirmaInvitado').val()) && $('#telefonoInvitado').val().length > 0 ) {
                if ($("#form").valid()) {
                    $('#form').submit();
                } else {
                    //errorBoletos();
                    return;
                }

            } else {
                errorSesion();
            }
        @endguest
        @auth
        if ($("#form").valid()) {
            $('#form').submit();
        } else {
          //  errorBoletos();
            return;
        }
        @endauth
        errorSesion();
        }

        function errorSesion() {
            toastr["error"]("Inicia sesión o agrega tus datos de invitado para continuar la compra", "Error")

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": true,
                "progressBar": true,
                "positionClass": "toast-top-center",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        }
        function errorEmailPasswordField() {
            toastr["error"]("Llena tu email y cotraseña", "Error")

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": true,
                "progressBar": true,
                "positionClass": "toast-top-center",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        }

        function errorBoletos() {
            toastr["warning"]("LLena la informacion de todos los boletos para continuar", "Error")

            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-right",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        }
        $.extend($.validator.messages, {
            required: "El campo es obligatorio",
            email: "El campo email no contiene un formato correcto",
        });
</script>
<script>
    var duration = moment.duration({
            'minutes': 5,
            'seconds': 00

        });

        var timestamp = new Date(0, 0, 0, 2, 10, 30);
        var interval = 1;
        var timer = setInterval(function() {
            timestamp = new Date(timestamp.getTime() + interval * 1000);

            duration = moment.duration(duration.asSeconds() - interval, 'seconds');
            var min = duration.minutes();
            var sec = duration.seconds();

            sec -= 1;
            if (min < 0) return clearInterval(timer);
            if (min < 10 && min.length != 2) min = '0' + min;
            if (sec < 0 && min != 0) {
                min -= 1;
                sec = 59;
            } else if (sec < 10 && length.sec != 2) sec = '0' + sec;


            const contador = document.getElementById("countdown");
            contador.innerHTML = min + ':' + sec;
            if (min == 0 && sec == 0)
                clearInterval(timer);

        }, 1000);


        async function dibujarAsientos(div) {
            idZona=div.id;

            var row ;
            $("#seatsBlock tr").remove();

            if(idZona==="platinoIzquierda"){
                $.ajax({
                    type: "GET",
                    url: "{{ url('filas') }}",
                    data: {
                        idBloque: 1
                    },
                    success: function(response) {
                        if (response.status == 404) {
                            console.log(response.bloque)

                        } else {
                            for(let i=0;i<response.filas.length;i++){

                                 $.ajax({
                                    type: "GET",
                                    url: "{{ url('asientos') }}",
                                    data: {
                                        idFila: response.filas[i].id
                                    },
                                    success: function(response) {
                                        if (response.status == 404) {
                                            console.table("Data no encontrada")

                                        } else {
                                            var nuevaFila   = '<tr>';
                                            for(let j=0;j<response.asientos.length;j++){
                                               if(response.asientos[j].estado=="Libre")
                                                    nuevaFila += "<td><input type=\"checkbox\"    class=\" seats\" value="+response.asientos[j].id+ "></td>";
                                               //  console.log(row)
                                               else{
                                                   console.log(response.asientos[j].id + " " +response.asientos[j].estado)
                                                    nuevaFila += "<td><input type=\"checkbox\" disabled   class=\"seatReservado seats\" value="+response.asientos[j].id+ "></td>";
                                               }
                                            }
                                            nuevaFila +="</tr>"
                                            $('#seatsBlock').append(nuevaFila);
                                            //console.log("soy el que la caga"+nuevaFila)

                                        }

                                    }
                                });

                                //$('#Asientos').append(row);


                            }
                        }
                        // precioEntrada =data.porcentaje;
                    }
                });
            }else if(idZona==="platinoDerecha"){
                $.ajax({
                    type: "GET",
                    url: "{{ url('filas') }}",
                    data: {
                        idBloque: 2
                    },
                    success: function(response) {
                        if (response.status == 404) {
                            console.log(response.bloque)

                        } else {
                            for(let i=0;i<response.filas.length;i++){

                                $.ajax({
                                    type: "GET",
                                    url: "{{ url('asientos') }}",
                                    data: {
                                        idFila: response.filas[i].id
                                    },
                                    success: function(response) {
                                        if (response.status == 404) {
                                            console.table("Data no encontrada")

                                        } else {
                                            var nuevaFila   = '<tr>';
                                            for(let j=0;j<response.asientos.length;j++){

                                                if(response.asientos[j].estado=="Libre")
                                                    nuevaFila += "<td><input type=\"checkbox\"    class=\" seats\" value="+response.asientos[j].id+ "></td>";
                                               //  console.log(row)
                                               else{
                                                   console.log(response.asientos[j].id + " " +response.asientos[j].estado)
                                                    nuevaFila += "<td><input type=\"checkbox\" disabled   class=\"seatReservado seats\" value="+response.asientos[j].id+ "></td>";
                                               }
                                               //  console.log(row)
                                            }
                                            nuevaFila +="</tr>"
                                            $('#seatsBlock').append(nuevaFila);
                                            //console.log("soy el que la caga"+nuevaFila)

                                        }

                                    }
                                });

                                //$('#Asientos').append(row);


                            }
                        }
                        // precioEntrada =data.porcentaje;
                    }
                });
            }
            else if(idZona==="oroIzquierda"){
                $.ajax({
                    type: "GET",
                    url: "{{ url('filas') }}",
                    data: {
                        idBloque: 3
                    },
                    success: function(response) {
                        if (response.status == 404) {
                            console.log(response.bloque)

                        } else {
                            for(let i=0;i<response.filas.length;i++){

                                $.ajax({
                                    type: "GET",
                                    url: "{{ url('asientos') }}",
                                    data: {
                                        idFila: response.filas[0].id
                                    },
                                    success: function(response) {
                                        if (response.status == 404) {
                                            console.table("Data no encontrada")

                                        } else {
                                            var nuevaFila   = '<tr>';
                                            for(let i=0;i<response.asientos.length;i++){
                                                console.log("num "+response.asientos.length);
                                                nuevaFila += "<td><input type=\"checkbox\" class=\"seats\" value="+response.asientos[i].nombre+ "></td>";
                                               //  console.log(row)
                                            }
                                            nuevaFila +="</tr>"
                                            $('#seatsBlock').append(nuevaFila);
                                            //console.log("soy el que la caga"+nuevaFila)

                                        }

                                    }
                                });

                                //$('#Asientos').append(row);


                            }
                        }
                        // precioEntrada =data.porcentaje;
                    }
                });
            }else if(idZona==="oroDerecha"){
                $.ajax({
                    type: "GET",
                    url: "{{ url('filas') }}",
                    data: {
                        idBloque: 4
                    },
                    success: function(response) {
                        if (response.status == 404) {
                            console.log(response.bloque)

                        } else {
                            for(let i=0;i<response.filas.length;i++){

                                $.ajax({
                                    type: "GET",
                                    url: "{{ url('asientos') }}",
                                    data: {
                                        idFila: response.filas[i].id
                                    },
                                    success: function(response) {
                                        if (response.status == 404) {
                                            console.table("Data no encontrada")

                                        } else {
                                            var nuevaFila   = '<tr>';
                                            for(let j=0;j<response.asientos.length;j++){

                                                    nuevaFila += "<td><input type=\"checkbox\" class=\"seats\" value="+response.asientos[j].id+ "></td>";


                                               //  console.log(row)
                                            }
                                            nuevaFila +="</tr>"
                                            $('#seatsBlock').append(nuevaFila);
                                            //console.log("soy el que la caga"+nuevaFila)

                                        }

                                    }
                                });

                                //$('#Asientos').append(row);


                            }
                        }
                        // precioEntrada =data.porcentaje;
                    }
                });
            }




        }

        $(function(){

            //Aquí es donde te digo que le hablo al document, le ligo el evento, le digo que selectores y le paso lo que quiero que haga
            $( document ).on( 'click', '.seats', function(){
            let val = $(this).val();
            //Revisa en que status está el checkbox y controlalo según lo //desees
            if( $( this ).is( ':checked' ) ){
                $.ajax({
                    type: "PUT",
                    url: "{{ url('asientos/ocupar') }}",
                    data: {
                     _token:'{{ csrf_token() }}',
                    idAsiento: val
                    },
                    success: function(response) {
                        console.log(response)
                         if (response.status == 200) {
                            console.table("Actualizado con Exito")
                        } else {

                            console.table("Dato No encontrado")
                        }
                        }
                    });
            }

            else{

                $.ajax({
                    type: "PUT",
                    url: "{{ url('asientos/liberar') }}",
                    data: {
                     _token:'{{ csrf_token() }}',
                     idAsiento: val
                    },
                    success: function(response) {
                         if (response.status == 200) {
                            console.table("Liberado con Exito")
                        } else {

                            console.table("Dato No encontrado")
                        }
                        }
                    });
            }
            });

        });


</script>



@endpush