<!DOCTYPE html>
<html style="height:100%;">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{{ config('dz.name') }} | @yield('title', $page_title ?? '')</title>
<meta name="description" content="@yield('page_description', $page_description ?? '')"/>
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicon.png') }}">

<head>
    <title>KSSTM Ticket</title>
</head>

<style type="text/css">
    body{
        font-family: 'Calibri', sans-serif;

    }
    .m-0{
        margin: 0px;
    }
    .p-0{
        padding: 0px;
    }
    .pt-5{
        padding-top:5px;
    }
    .mt-10{
        margin-top:5px;
    }
    .text-center{
        text-align:center !important;
    }
    .w-100{
        width: 100%;
    }
    .w-90{
        width: 90%;
    }
    .w-95{
        width: 95%;
    }
    .w-50{
        width:50%;   
    }
    .w-25{
        width:25%;   
    }
    .w-75{
        width:75%;   
    }
    .w-85{
        width:85%;   
    }
    .w-80{
        width:80%;   
    }
    .w-20{
        width:20%;   
    }
    .w-15{
        width:15%;   
    }
    .logo img{
        width:45px;
        height:45px;
        padding-top:30px;
    }
    .logo span{
        margin-left:8px;
        top:19px;
        position: absolute;
        font-weight: bold;
        font-size:25px;
    }
    .gray-color{
        color:#5D5D5D;
    }
    .text-bold{
        font-weight: bold;
    }
    .border{
        border:1px solid black;
    }
    table tr,th,td{
        border-collapse:collapse;
        padding:7px 8px;
    }
    table tr th{
        background: #F4F4F4;
        font-size:12px;
    }
    table tr td{
        font-size:11px;
    }
    table{
        border-collapse:collapse;
    }
    .box-text p{
        line-height:10px;
    }
    .float-left{
        float:left;
    }
    .total-part{
        font-size:22px;
        line-height:12px;
    }
    .total-right p{
        padding-right:20px;
    }
</style>
<style>
    p+p {
        page-break-before: always;
    }
    td { padding: 10 10 10 10 !important; }


    hr {
      border-top: solid 1px #000 !important;
    }
    body {
        background-color: white;
        color: black;
    }
    @media print {
        html, body {
            height: auto;    
        }
    }
    .show {
        display: block;
      }

      .hide {
        display: none;
      }
</style>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{asset('css/kioskboard-2.3.0.min.css')}}">

<script src="{{asset('js/plugins-init/jquery.min.js')}}" type="text/javascript"></script>
<body>
    <div class="card card-body">
        <div class="card-header" style="background-color: #c7addf;">
            <div class="col-12" style="text-align: center;">
                <a href="#" class="brand-logo">
                    <img class="logo-abbr" width="80" src="{{asset('images/logo_ksstm.png')}}" alt="">
                </a>
            
                <label style="text-align: left;"><b><h2>KSSTM TICKETING APPLICATION :: SELF SERVICE KIOSK</h2></b></label>
            </div>
        </div>        
        <div class="content-body" style="margin-left: 5rem !important; text-align: center;">
            @php   
            $timenowplus5min = strtotime($timenow." +5minutes");
            @endphp
            <script>
                var timenow_str = {{$timenowplus5min}};
            </script>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <form method="post" action="{!! url('/getTickets'); !!}" id="ticketform">
                                {{ csrf_field() }}
                                <div id="formdiv">
                                    <div class="form-group"><br><br>
                                        <label class="mb-1"><h1><strong>GET TICKET</strong></h1></label>
                                        <div class="input-group mb-3 col-6">
                                            <input type="number" id="phone" name="phone" class=" js-kioskboard-input form-control" data-kioskboard-type="numpad" value="" placeholder="Enter 10 digit mobile number" pattern="[0-9]{1}[0-9]{9}" required minlength="10" maxlength="10" onkeypress="return isNumber_phone(event);" >
                                        </div>
                                    </div>
                                    <div class="text-center" id="otpbtn">
                                        <div class="form-group col-2">
                                            <button type="button" class="btn btn-primary btn-block" id="getOTPForm">Get OTP</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="ticketbtn" class ="hide">
                                    <div class="form-group">
                                        <label class="mb-1"><h1><strong>Phone</strong></h1></label>
                                        <input type="hidden" id="phonenumber" name="phonenumber" class="form-control">
                                        <span id="phonediv"></span>
                                    </div>
                                    <div class="form-group col-2">
                                        <button type="submit" class="btn btn-primary btn-block" id="getTicket">Get Tickets</button>
                                    </div>
                                </div>
                                <div id="otpdiv" class ="hide">
                                    <div class="form-group col-4">
                                        <label for="emotpail"><h1><strong>OTP:</strong></h1></label>
                                        <input class="js-kioskboard-input form-control" data-kioskboard-type="numpad" type="number" placeholder="Enter OTP" readonly="false" id="otp" name="otp" />
                                    </div>
                                    <div class="form-group col-4">
                                        
                                        <div class="btn-toolbar" role="toolbar">
                                          <div class="btn-group mr-2" role="group" aria-label="First group">
                                             <button type="button" id="otpSubmit" class="btn btn-primary btn-block">Submit</button>
                                          </div>
                                          <div class="btn-group mr-2" role="group" aria-label="Second group">
                                            <button type="button" id="otpResendSubmit" class="btn btn-info btn-block pull-right">Resend OTP</button>
                                          </div>
                                          
                                        </div>

                                    </div>
                                </div>
                            </form>
                        </div>      
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /////////validate integer fields in phone ///////////////////////////
        function isNumber_phone(evt) 
        {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (!((charCode == 43) || (charCode >= 48 && charCode <= 57)))
            //if ((charCode!=43 ) && (charCode < 48 || charCode > 57)) 
            {
              return false;
            }

            return true;
        }
        $(function()
        {
            $("#getOTPForm").click(function()
            {
                var phone= $("#phone").val();
                var csrf = "{{csrf_token()}}";
                if(!phone)
                {
                    alert("Please enter all fields");
                    return false;
                }
                if(!ValidatePhone(phone))
                {
                    return false;
                }
                $.ajax({
                      type: "POST",
                      url: "{{ 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'); 
                        }
                        else
                        {
                            alert("Invalid Phone Number... please try later");
                        }
                        
                      }
                });   
            });

            $("#otpSubmit").click(function()
            {
                var phone= $("#phone").val();
                var csrf = "{{csrf_token()}}";
                var otpentered = $("#otp").val();
                $.ajax({
                    type: "POST",
                    url: "{{ 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();
                        }
                        else
                        {
                           alert("Oops...OTP doesnot match !!", "error");
                        }
                    }
                });   
            });

            $("#otpResendSubmit").click(function()
            {
                var phone= $("#phone").val();
                var csrf = "{{csrf_token()}}";
                if(!phone)
                {
                    alert("Please enter all fields");
                    return false;
                }
                if(!ValidatePhone(phone))
                {
                    return false;
                }
                $.ajax({
                      type: "POST",
                      url: "{{ 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'); 
                        }
                        else
                        {
                            alert("something wrong... please try later");
                        }
                        
                      }
                });   
            });
        

            /*$("#getTicket").click(function()
            {
                var phone= $("#phonenumber").val();
                var csrf = "{{csrf_token()}}";
                if(!phone)
                {
                    alert("Please enter all fields");
                    return false;
                }
                if(!ValidatePhone(phone))
                {
                    return false;
                }
                $.ajax({
                      type: "POST",
                      url: "{{ url('/getTicket_phonenumber')}}",
                      dataType : 'json',
                      data: {_token: csrf, phone: phone},
                      success: function( result ) 
                      {
                        if(result.statusCode == 200)
                        {                    
                            $("#formdiv").removeClass('show');
                            $("#formdiv").addClass('hide');
                            $("#otpdiv").removeClass('show'); 
                            $("#otpdiv").addClass('hide'); 
                            $("#ticketbtn").removeClass('show'); 
                            $("#ticketbtn").addClass('hide');
                            $("#otpbtn").removeClass('show'); 
                            $("#otpbtn").addClass('hide'); 
                            $("#ticketdiv").removeClass('hide'); 
                            $("#ticketdiv").addClass('show');    
                        }
                        else
                        {
                            alert("something wrong... please try later");
                        }
                        
                      }
                });   
            });*/
        });

        function ValidatePhone(phone) 
        {
          var phoneformat =/^\d{10}$/;

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

        ///////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);
                //yconsole.log(timenow_str);
                if(time>=timenow_str)
                {
                    if (navigator.userAgent.indexOf("Firefox") > 0) {
                        window.location = "{{URL::to('getTicket_general')}}";
                    }
                    window.location.href = "{{URL::to('getTicket_general')}}";
                }
            }, 1000);

        }
    </script>
 <script src="{{asset('js/index-tooltip.js')}}"></script>
<script src="{{asset('js/kioskboard-2.3.0.min.js')}}" type="text/javascript"></script>
<script>
/*!
* KioskBoard - Virtual Keyboard ('https://github.com/furcan/KioskBoard')
* Version: 2.3.0
* Author: Furkan ('https://github.com/furcan')
* Copyright 2022 KioskBoard - Virtual Keyboard, MIT Licence ('https://opensource.org/licenses/MIT')*
*/

// DEMO: Tooltip: begin
function furcanTooltip(tooltip) {
  $('body > .tooltip').remove();
  $(tooltip).tooltip({
    trigger: 'hover',
    container: 'body',
  });
};
furcanTooltip('[data-toggle="tooltip"]');

$(document).on('click', function () {
  if ($('body > .tooltip').length > 0) {
    $('body > .tooltip').remove();
  }
});
// DEMO: Tooltip: end

// DEMO: Turkish Keys: begin
var turkishKeyboard = [
  {
    "0": "Q",
    "1": "W",
    "2": "E",
    "3": "R",
    "4": "T",
    "5": "Y",
    "6": "U",
    "7": "I",
    "8": "O",
    "9": "P",
    "10": "Ğ",
    "11": "Ü"
  },
  {
    "0": "A",
    "1": "S",
    "2": "D",
    "3": "F",
    "4": "G",
    "5": "H",
    "6": "J",
    "7": "K",
    "8": "L",
    "9": "Ş",
    "10": "İ",
  },
  {
    "0": "Z",
    "1": "X",
    "2": "C",
    "3": "V",
    "4": "B",
    "5": "N",
    "6": "M",
    "7": "Ö",
    "8": "Ç",
  }
];
// DEMO: Turkish Keys: end

// DEMO: KioskBoard Run: begin
KioskBoard.run('.js-kioskboard-input', {
  keysArrayOfObjects: turkishKeyboard,
  // keysNumpadArrayOfNumbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
  // keysSpecialCharsArrayOfStrings: ['a', 'b', 'c'],
  // keysJsonUrl: 'kioskboard-keys-turkish.json',
  language: 'tr',
  keysFontFamily: 'Barlow',
  keysFontWeight: '500',
  // cssAnimationsStyle: 'fade',
  // keysFontSize: '20px',
  // allowRealKeyboard: true,
  // allowMobileKeyboard: true,
  // keysAllowSpacebar: false,
});


// DEMO: KioskBoard Run: end

// DEMO: KioskBoard Theme: begin
$('.js-kioskboard-input-theme').each(function () {
  var $this = $(this);
  var thisTheme = $this.data('theme') || 'light';
  KioskBoard.run(this, {
    keysArrayOfObjects: turkishKeyboard,
    language: 'tr',
    theme: thisTheme,
  });
});

$("#otp").val('');
$("#phone").val('');
</script>
</body>
</html>        