<?php $__env->startSection('content'); ?>
<style>
.btn {
    width:120px !important;
    height:70px !important;
}
body {
    background-image: url('images/sky2.jpg');
    height: 100vh;
}
.btn-outline-secondary {
    background-color: azure;
    font-size: large;
}
.show {
    display: block;
}

.hide {
    display: none;
}

.loader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes  spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#0C9;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
}

.my-float{
    margin-top:22px;
}
</style>
<script src="<?php echo e(asset('js/plugins-init/jquery.min.js')); ?>" type="text/javascript"></script>
<?php   
    $timenowplus5min = strtotime($timenow." +5minutes");
?>
<script>
    var timenow_str = <?php echo e($timenowplus5min); ?>;
</script>
<form method="post" action="<?php echo url('/getTickets'); ?>" id="ticketform" style="max-width: 500px;">
    <?php echo e(csrf_field()); ?>

    <div id="formdiv" class="btn-group-vertical ml-4 mt-4 " role="group" aria-label="Phone div">
        <div class="btn-group">
            <div class="col-sm-20">
                <img class="logo-abbr" width="80" src="<?php echo e(asset('images/logo_ksstm.png')); ?>" alt="">
            </div>
            <div class="col-sm-80">
                <label style="text-align: center; padding:15px;"><br><b><h4>KSSTM ONLINE TICKETING APPLICATION <br>SELF SERVICE KIOSK</h4></b></label>
            </div>
        </div>
       
         <div class="btn-group">
            <label><h5>Enter your phone number for printing ticket (OTP is required)</h5></label>
            
        </div>
        <div class="btn-group">
            <input class="text-center form-control-lg mb-2" id="phone" name="phone" style="width:500px !important;" placeholder="Enter 10 digit phone number" autocomplete="off" required minlength="10" maxlength="10"><div class="loader" id="loader2" style="display:none;"></div>
        </div>
       
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '1';">1</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '2';">2</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '3';">3</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '4';">4</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '5';">5</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '6';">6</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '7';">7</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '8';">8</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '9';">9</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value.slice(0, -1);">&lt;</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('phone').value=document.getElementById('phone').value + '0';">0</button>
            <button type="button" class="btn btn-primary py-3" id="getOTPForm">GET OTP</button>
        </div>
    </div>


    <div id="otpdiv" class="btn-group-vertical ml-4 mt-4 hide" role="group" aria-label="OTP div">
        <div class="btn-group">
            <div class="col-sm-20">
                <img class="logo-abbr" width="80" src="<?php echo e(asset('images/logo_ksstm.png')); ?>" alt="">
            </div>
            <div class="col-sm-80">
                <label style="text-align: center; padding:15px;"><br><b><h4>KSSTM ONLINE TICKETING APPLICATION <br>SELF SERVICE KIOSK</h4></b></label>
            </div>
        </div>
       
         <div class="btn-group">
            <label><h5>Enter OTP which was sent to your phone number</h5></label>
            
        </div>
        <div class="btn-group">
            <div class="form-inline">
            <input class="text-center form-control-lg mb-2" id="otp" name="otp" placeholder="Enter OTP" autocomplete="off">
            <button type="button" id="otpResendSubmit" class="btn btn-warning" style="width:120px !important; height: 45px !important;">Resend OTP</button><div class="loader" id="loader" style="display:none;"></div>
            </div>
           
        </div>
       
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" style="width:120px !important;" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '1';">1</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '2';">2</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '3';">3</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '4';">4</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '5';">5</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '6';">6</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '7';">7</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '8';">8</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '9';">9</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value.slice(0, -1);">&lt;</button>
            <button type="button" class="btn btn-outline-secondary py-3" onclick="document.getElementById('otp').value=document.getElementById('otp').value + '0';">0</button>
            <button type="button" class="btn btn-primary py-3" id="otpSubmit">SUBMIT</button>
        </div>
    </div>

</form>

<a href="<?php echo e(URL::to('getTicket_public')); ?>" class="float">
<i class="fa fa-refresh my-float"></i>
</a>


<script type="text/javascript">
function ValidatePhone(phone) 
{
  var phoneformat =/^\d{10}$/;

 if (phone.match(phoneformat))
  {
    return (true);
  }
    alert("You have entered an invalid phone number!");
    return (false);
}

$(function()
{
    $("#getOTPForm").click(function()
    {
        $('#loader').show();
        var phone= $("#phone").val();
        var csrf = "<?php echo e(csrf_token()); ?>";
        if(!phone)
        {
            alert("Please enter all fields");
            return false;
        }
        if(!ValidatePhone(phone))
        {
            return false;
        }
        
        

        $.ajax({
              type: "POST",
              url: "<?php echo e(url('/getTicket_general_post')); ?>",
              dataType : 'json',
              data: {_token: csrf, phone: phone},
              success: function( result ) 
              {
                if(result.statusCode == 200)
                {                    
                    $("#formdiv").removeClass('show');
                    $("#formdiv").addClass('hide');
                    $("#otpdiv").removeClass('hide'); 
                    $("#otpdiv").addClass('show'); 
                    $('#loader').hide();
                }
                else
                {
                    alert("Invalid Phone Number... please try later");
                    $('#loader').hide();
                }
                
              }
        });   
    });

    $("#otpSubmit").click(function()
    {
        $('#loader').show();
        var phone= $("#phone").val();
        var csrf = "<?php echo e(csrf_token()); ?>";
        var otpentered = $("#otp").val();
        $.ajax({
            type: "POST",
            url: "<?php echo e(url('/phoneotpverify')); ?>",
            dataType : 'json',
            data: {_token: csrf, phone: phone, otpentered: otpentered},
            success: function( result ) 
            {
                console.log(result);
                
                if(result.statusCode == 200)
                {
                        $("#formdiv").removeClass('show');
                        $("#formdiv").addClass('hide');
                        $("#otpdiv").removeClass('show'); 
                        $("#otpdiv").addClass('hide'); 
                        $("#ticketbtn").removeClass('hide'); 
                        $("#ticketbtn").addClass('hide');
                        $("#otpbtn").removeClass('show'); 
                        $("#otpbtn").addClass('hide'); 
                        $("#phonediv").html(phone);
                        $("#phonenumber").val(phone);

                        document.getElementById("ticketform").submit();
                        $('#loader').hide();
                }
                else
                {
                   alert("Oops...OTP doesnot match !!", "error");
                   $('#loader').hide();
                }
            }
        });   
    });

    $("#otpResendSubmit").click(function()
    {
        $('#otpResendSubmit').hide();
        $('#loader').show();
        var phone= $("#phone").val();
        var csrf = "<?php echo e(csrf_token()); ?>";
        if(!phone)
        {
            alert("Please enter all fields");
            return false;
        }
        if(!ValidatePhone(phone))
        {
            return false;
        }
        $.ajax({
              type: "POST",
              url: "<?php echo e(url('/otpresend')); ?>",
              dataType : 'json',
              data: {_token: csrf, phone: phone},
              success: function( result ) 
              {
                if(result.statusCode == 200)
                {                    
                    $("#formdiv").removeClass('show');
                    $("#formdiv").addClass('hide');
                    $("#otpdiv").removeClass('hide'); 
                    $("#otpdiv").addClass('show');
                    $('#loader').hide(); 
                }
                else
                {
                    alert("something wrong... please try later");
                    $('#loader').hide();
                }
                
              }
        });   
    });

});

///////time checking //////////////////////////////////////////////
window.onload = function() 
{
    var interval = setInterval(() => 
    {
        //console.log(new Date().toLocaleTimeString()); 
        const d = new Date();
        let time = Math.floor(d.getTime()/1000);
        //console.log(time);
        //console.log(timenow_str);
        if(time>=timenow_str)
        {
            if (navigator.userAgent.indexOf("Firefox") > 0) {
                window.location = "<?php echo e(URL::to('getTicket_public')); ?>";
            }
            window.location.href = "<?php echo e(URL::to('getTicket_public')); ?>";
        }
    }, 10000);

}

</script>

<?php $__env->stopSection(); ?>     
<?php echo $__env->make('layout.fullwidth', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/ksstmprod/resources/views/getTicket_public.blade.php ENDPATH**/ ?>