@include('header')

<div class="container-md">
    <div class="row">
        <div class="col-2">
            <div style="text-align:left" class="count_clock">
                <img class="headerlogo" src="{{ asset('images/logo.png') }}" alt="logo" onclick="location.reload()" style="cursor: pointer">
            </div>
        </div>
        <div class="col-7"></div>
        <div class="col-3">
            <div style="text-align:right; font-size:2em; margin-top:50px" class="count_clock">
            {{date('d/m/Y')}}
            </div>
        </div>
    </div>
    <form id="registro" name="registro" action="{{ route('guardarRegistro') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-3">
                <div id="btnGeneralInd" class="card text-white bg-primary mb-3" style="cursor: pointer">
                    <div class="card-body text-center">
                        <h4 class="card-title">ACCESO GENERAL <br>$300</h4>
                    </div>
                </div>
                <div id="btnJovenInd" class="card text-white bg-warning mb-3" style="cursor: pointer">
                    <div class="card-body text-center">
                        <h4 class="card-title">ACCESO JOVEN <br>$150</h4>
                    </div>
                </div>
                <!--div id="btnMenorInd" class="card text-white bg-success mb-3" style="cursor: pointer">
                    <div class="card-body text-center">
                        <h4 class="card-title">ACCESO MENOR <br>$500</h4>
                    </div>
                </div-->
                <div id="btnFreeInd" class="card text-white bg-secondary mb-3" style="cursor: pointer">
                    <div class="card-body text-center">
                        <h4 class="card-title">CORTESÍA</h4>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div class="card bg-light mb-3">
                    <div class="card-body" style="text-align: right">
                        <div class="row">
                            <div class="col-7">
                                <h2 class="card-title">GENERAL:</h2>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="general" name="general" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-7">
                                <h2 class="card-title">JOVEN:</h2>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="joven" name="joven" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div>
                        <!--div class="row">
                            <div class="col-7">
                                <h2 class="card-title">MENOR:</h2>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="menor" name="menor" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div-->
                        <div class="row">
                            <div class="col-7">
                                <h2 class="card-title">SUBTOTAL:</h2>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="subtotal" name="subtotal" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-7">
                                <h2 class="card-title">DESCUENTO %:</h2>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="descuento" name="descuento" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <button type="button" id="calcular" class="btn btn-dark btn-lg " disabled>Generar Total</button>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-7">
                                <h1 class="card-title">TOTAL $:</h1>
                            </div>
                            <div class="col-5">
                                <input value="0" type="text" id="total" name="total" placeholder="0" class="form-control bg-white " style="width: 100%;height: 40px;font-size: 30px; font-weight:bold; color:black; text-transform:uppercase; margin-top:5px;margin-bottom:5px; text-align:right">
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="row text-center">
                    <h2>DATOS DEL REGISTRANTE</h2>
                    <input type="text" id="nombre" name="nombre" placeholder="NOMBRE" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; text-transform:uppercase; margin-top:5px;margin-bottom:5px" onkeyup="javascript:this.value=this.value.toUpperCase();">
                    <input type="text" id="apellidos" name="apellidos" placeholder="APELLIDOS" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; text-transform:uppercase; margin-top:5px;margin-bottom:5px" onkeyup="javascript:this.value=this.value.toUpperCase();">
                    <input type="text" id="edad" name="edad" placeholder="EDAD (AÑOS)" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; margin-top:5px;margin-bottom:5px">
                    <input type="text" id="codigopostal" name="codigopostal" placeholder="CÓDIGO POSTAL" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; margin-top:5px;margin-bottom:5px">
                    <input type="email" id="email" name="email" placeholder="EMAIL" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; margin-top:5px;margin-bottom:5px">
                    <input type="text" id="telefono" name="telefono" placeholder="TELÉFONO (10 DIGITOS)" required class="form-control step_1 bg-white overflow-hidden rounded-pill text-center active" style="width: 100%;height: 40px;font-size: 16px; margin-top:5px;margin-bottom:5px">
                </div>
                <div class="row">
                    <div class="col-12" style="text-align:right;margin-top:10px">
                        <!--button type="button" class="btn btn-light btn-lg btn-block">Cancelar</button-->
                        <button type="button" id="enviar" class="btn btn-dark btn-lg btn-block" disabled>Comprar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div style="text-align:center" class="count_clock">
            <img class="headerlogo" src="{{ asset('images/logo_ideando.png') }}" alt="Powered By" onclick="location.reload()" style="cursor: pointer; max-width:150px">
        </div>
    </div>
</div>

<script>
    $('#btnGeneralInd').click(function() {
        var general = parseInt($('#general').val());
        $('#general').val(general + 1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val(subtotal + 300);
        $('#calcular').prop('disabled',false);
    });
    $('#btnJovenInd').click(function() {
        var joven = parseInt($('#joven').val());
        $('#joven').val(joven + 1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val(subtotal + 150);
        $('#calcular').prop('disabled',false);
    });
    /*
    $('#btnMenorInd').click(function() {
        var menor = parseInt($('#menor').val());
        $('#menor').val(menor + 1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val(subtotal + 500);
        $('#calcular').prop('disabled',false);
    });
    */
    $('#btnFreeInd').click(function() {
        var cortesia = parseInt($('#cortesia').val());
        $('#cortesia').val(cortesia + 1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val(0);
        $('#calcular').prop('disabled',false);
    });
    $('#calcular').click(function() {
        var subtotal = parseInt($('#subtotal').val());
        var descuento = parseInt($('#descuento').val());
        var totaldescuento = (descuento * subtotal) / 100;
        $('#total').val(subtotal - totaldescuento);
        $('#enviar').prop('disabled',false);
    });

    /*
    $('#btnGeneralFam').click(function(){
        var general = parseInt($('#general').val());
        $('#general').val(general+1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val (subtotal+1200);
    });
    $('#btnJovenFam').click(function(){
        var joven = parseInt($('#joven').val());
        $('#joven').val(joven+1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val (subtotal+750);
    });
    $('#btnMenorFam').click(function(){
        var menor = parseInt($('#menor').val());
        $('#menor').val(menor+1);
        var subtotal = parseInt($('#subtotal').val());
        $('#subtotal').val (subtotal+350);
    });
    */
    $('#enviar').click(function() {

        Swal.fire({
            title: 'Compra Exitosa!',
            text: 'La compra se ha realizado correctamente.',
            icon: 'success',
            showCancelButton: false,
            confirmButtonColor: '#7066e0',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.isConfirmed) {
                $('#registro').submit();
            }
        })
    });
</script>

@include('footer')