@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
        @guest
        <div class="row">
            <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>
            <div class="col-md-6">
                <img style="width: 100%; height:10'0%;" src="{{asset('assets_client/img/mapa.jpeg')}}" alt="">
            </div>
        </div>




        @endguest

        <div class="row text-black mt-2">
            @foreach ($entradas as $entrada)
            @php
            $nBoleto = $loop->index;
            @endphp


            @for ($i = 0; $i < $entrada['cantidad']; $i++) <div class="card mb-5">

                <div class="row my-2">
                    <div class="col-sm-6">
                        <input name="idEntrada[]" hidden value="{{$entrada['idEntrada']}}" />
                        <div class="card-body">
                            <h5 class="card-title">Boleto {{ $i + 1 }} {{ $entrada['nombre'] }}
                            </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"
                                        name="boletoNombre[]" value="{{ old('boletoNombre' . ($nBoleto + 1)) }}"
                                        required>

                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label for="exampleInputPassword1" class="form-label">Apellidos</label>
                                    <input type="text" class="form-control" name="boletoApellidos[]"
                                        value="{{ old('boletoApellidos' . ($nBoleto + 1)) }}" required>
                                </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="boletoEmail[]" value="{{ old('boletoEmail' . ($nBoleto + 1)) }}" required>

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-sm-4 mt-2">
                                    {{--
                                    <label for="exampleInputEmail1" class="form-label">Fila</label>
                                    <input type="text" class="form-control" aria-describedby="emailHelp"
                                        name="boletoFila[]" value="{{ old('boletoFila' . ($nBoleto + 1)) }}" required>
                                    --}}
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">Bloque</label>
                                        <select class="form-control" id="exampleFormControlSelect1">
                                            <option>1</option>
                                            <option>2</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="col-sm-4 md-3">
                                    {{--
                                    <label for="exampleInputEmail1" class="form-label">Asientos</label>
                                    <input type="text" class="form-control" aria-describedby="emailHelp"
                                        name="boletoAsiento[]" value="{{ old('boletoAsiento' . ($nBoleto + 1)) }}"
                                        required>
                                    --}}

                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">Fila</label>
                                        <select class="form-control" id="exampleFormControlSelect1">
                                            <option>1</option>
                                            <option>2</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-4 md-3">
                                    {{--
                                    <label for="exampleInputEmail1" class="form-label">Asientos</label>
                                    <input type="text" class="form-control" aria-describedby="emailHelp"
                                        name="boletoAsiento[]" value="{{ old('boletoAsiento' . ($nBoleto + 1)) }}"
                                        required>
                                    --}}

                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">Asientos</label>
                                        <select class="form-control" id="exampleFormControlSelect1">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                        </select>
                                    </div>
                                </div>
                            </div>



                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="theatre">
                            <div class="screen-side">
                              <div class="screen">Screen</div>
                              <h3 class="select-text">Please select a seat</h3>
                            </div>
                            <div class="exit exit--front">
                            </div>
                            <ol class="cabin">
                              <li class="row row--1">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="1A" />
                                    <label for="1A">1A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="1B" />
                                    <label for="1B">1B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="1C" />
                                    <label for="1C">1C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" disabled id="1D" />
                                    <label for="1D">Occupied</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="1E" />
                                    <label for="1E">1E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="1F" />
                                    <label for="1F">1F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--2">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="2A" />
                                    <label for="2A">2A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="2B" />
                                    <label for="2B">2B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="2C" />
                                    <label for="2C">2C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="2D" />
                                    <label for="2D">2D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="2E" />
                                    <label for="2E">2E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="2F" />
                                    <label for="2F">2F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--3">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="3A" />
                                    <label for="3A">3A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="3B" />
                                    <label for="3B">3B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="3C" />
                                    <label for="3C">3C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="3D" />
                                    <label for="3D">3D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="3E" />
                                    <label for="3E">3E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="3F" />
                                    <label for="3F">3F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--4">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="4A" />
                                    <label for="4A">4A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="4B" />
                                    <label for="4B">4B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="4C" />
                                    <label for="4C">4C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="4D" />
                                    <label for="4D">4D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="4E" />
                                    <label for="4E">4E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="4F" />
                                    <label for="4F">4F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--5">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="5A" />
                                    <label for="5A">5A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="5B" />
                                    <label for="5B">5B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="5C" />
                                    <label for="5C">5C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="5D" />
                                    <label for="5D">5D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="5E" />
                                    <label for="5E">5E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="5F" />
                                    <label for="5F">5F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--6">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="6A" />
                                    <label for="6A">6A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="6B" />
                                    <label for="6B">6B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="6C" />
                                    <label for="6C">6C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="6D" />
                                    <label for="6D">6D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="6E" />
                                    <label for="6E">6E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="6F" />
                                    <label for="6F">6F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--7">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="7A" />
                                    <label for="7A">7A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="7B" />
                                    <label for="7B">7B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="7C" />
                                    <label for="7C">7C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="7D" />
                                    <label for="7D">7D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="7E" />
                                    <label for="7E">7E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="7F" />
                                    <label for="7F">7F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--8">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="8A" />
                                    <label for="8A">8A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="8B" />
                                    <label for="8B">8B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="8C" />
                                    <label for="8C">8C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="8D" />
                                    <label for="8D">8D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="8E" />
                                    <label for="8E">8E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="8F" />
                                    <label for="8F">8F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--9">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="9A" />
                                    <label for="9A">9A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="9B" />
                                    <label for="9B">9B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="9C" />
                                    <label for="9C">9C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="9D" />
                                    <label for="9D">9D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="9E" />
                                    <label for="9E">9E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="9F" />
                                    <label for="9F">9F</label>
                                  </li>
                                </ol>
                              </li>
                              <li class="row row--10">
                                <ol class="seats" type="A">
                                  <li class="seat">
                                    <input type="checkbox" id="10A" />
                                    <label for="10A">10A</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10B" />
                                    <label for="10B">10B</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10C" />
                                    <label for="10C">10C</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10D" />
                                    <label for="10D">10D</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10E" />
                                    <label for="10E">10E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10F" />
                                    <label for="10F">10F</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10E" />
                                    <label for="10E">10E</label>
                                  </li>
                                  <li class="seat">
                                    <input type="checkbox" id="10F" />
                                    <label for="10F">10F</label>
                                  </li>
                                </ol>
                              </li>
                            </ol>
                            <div class="exit exit--back">
                            </div>
                          </div>

                    </div>
                </div>
                @endfor


        </div>
        @endforeach
        <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>
    label.error {
        color: #a94442;
        padding: 1px 20px 1px 0px;
    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    ::selection {
        background-color: #eee;
    }

    ::-moz-selection {
        background-color: #eee;
    }

    .theatre {
        margin: 20px auto;
        width: 100%;
        max-width: 100%;
        border-radius: 5px;
        background-color: #fff;
        padding: 20px 10px;
        box-shadow: 0px 0px 17px -4px #000;
    }

    .screen-side {
        text-align: center;
    }

    .screen-side .screen {
        height: 25px;
        margin: 0 20px;
        border-radius: 50%;
        box-shadow: 0px -3px 0px 1px #ccc;
        color: #ccc;
    }

    .screen-side .select-text {
        color: #969696;
    }

    .exit {
        position: relative;
        height: 50px;
    }

    .exit:before,
    .exit:after {
        content: "EXIT";
        font-size: 14px;
        line-height: 18px;
        padding: 0px 5px;
        font-family: "Arial Narrow", Arial, sans-serif;
        display: block;
        position: absolute;
        background: #81c784;
        color: white;
        top: 50%;
        transform: translate(0, -50%);
    }

    .exit:before {
        left: 0;
    }

    .exit:after {
        right: 0;
    }

    ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .seats {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .seat {
        display: flex;
        flex: 0 0 14.28571%;
        padding: 5px;
        position: relative;
    }

    .seat:nth-child(4) {
        margin-right: 14.28571%;
    }

    .seat input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

    .seat input[type="checkbox"]:checked+label {
        background: #bada55;
        -webkit-animation-name: rubberBand;
        animation-name: rubberBand;
        animation-duration: 300ms;
        animation-fill-mode: both;
    }

    .seat input[type="checkbox"]:disabled+label {
        background: #ddd;
        text-indent: -9999px;
        overflow: hidden;
    }

    .seat input[type="checkbox"]:disabled+label:after {
        content: "X";
        text-indent: 0;
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .seat input[type="checkbox"]:disabled+label:hover {
        box-shadow: none;
        cursor: not-allowed;
    }

    .seat label {
        display: block;
        position: relative;
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5rem;
        padding: 4px 0;
        color: #fff;
        background: #26a69a;
        border-radius: 2px;
        animation-duration: 300ms;
        animation-fill-mode: both;
        transition-duration: 300ms;
    }

    .seat label:hover {
        cursor: pointer;
        box-shadow: 0px 0 7px 3px #ccc;
    }

    @-webkit-keyframes rubberBand {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }

        30% {
            -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
        }

        40% {
            -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
        }

        50% {
            -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
        }

        65% {
            -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
        }

        75% {
            -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
        }

        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }

    @keyframes rubberBand {
        0% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }

        30% {
            -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
        }

        40% {
            -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
        }

        50% {
            -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
        }

        65% {
            -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
        }

        75% {
            -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
        }

        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }

    .rubberBand {
        -webkit-animation-name: rubberBand;
        animation-name: rubberBand;
    }
</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);
</script>



@endpush