@extends('layouts.kiosk_auth')
@section('content')
<!--begin::Signin-->
<div class="login-form login-signin">
	<div class="text-center mb-5 mb-lg-10">
		<h2 class="font-weight-bold">Clock In / Clock Out<br>
			<small></small>
		</h2>
		<p class="text-dark-70 font-size-h3">Hello {{$profile->profile_first_name}}, </p>
		<p class="text-dark-70 font-size-h5">
			@if ($profile->currently_in == 1)
				You are currently Clock In.
			@else
				You are currently not Clock In.
			@endif
		</p>
	</div>
	
	@if ($profile->currently_in == 1)
	<!--begin::Form-->
	<form class="form" novalidate="novalidate" id="kt_login_kiosk_form" data-type="out" action="{{route('kiosk.clock.out')}}">
		{{csrf_field()}}
		<input type="hidden" name="profile_id" value="{{$profile->id}}">
		<input type="hidden" name="client_id" value="{{$profile->creator_id}}">
		<div class="form-group flex-wrap justify-content-between align-items-center text-center">
			<button id="kt_login_signin_submit" class="btn btn-danger btn-lg"> <i class="flaticon2-chronometer"></i> Clock Out</button>
		</div>
	</form>
	<!--end::Form-->
	@else
	<!--begin::Form-->
	<form class="form" novalidate="novalidate" id="kt_login_kiosk_form" data-type="in" action="{{route('kiosk.clock.in')}}">
		{{csrf_field()}}
		<input type="hidden" name="profile_id" value="{{$profile->id}}">
		<input type="hidden" name="client_id" value="{{$profile->creator_id}}">
		<div class="form-group flex-wrap justify-content-between align-items-center text-center">
			<button id="kt_login_signin_submit" class="btn btn-info btn-lg"> <i class="flaticon2-chronometer"></i> Clock IN</button>
		</div>
	</form>
	<!--end::Form-->
	@endif
    <h5 class="text-center" id="auto_logout"></h5>
    <div class="text-center">
        <a href="{{route('kiosk.logout')}}" class="btn btn-light-dark font-weight-bold mr-2 btn-icon-danger">
            <i class="flaticon-home-2"></i> Home
        </a>
    </div>
</div>
<!--end::Signin-->		
@endsection
@section('footer_content')
<div class="d-flex order-1 order-sm-2 my-2">
	<a href="{{route('kiosk.logout')}}" class="text-muted text-hover-primary">Logout</a>
</div>
@endsection
@section('page_js')
    <script>
        $(document).ready(function(){
            @if(Session::has('error'))
                Swal.fire("Opps!", "{{Session::get('error')}}", "success");
            @endif
            @if(Session::has('success_in'))
                //Swal.fire("Clocked IN!", "{!! Session::get('success_in')!!}", "success");
                Swal.fire({
                    title: "Clocked IN!",
                    html: "{!! Session::get('success_in')!!}",
                    icon: "success",
                    showCancelButton: false,
                    confirmButtonText: "Ok",
                }).then(function(result) {
                    autoLogout()
                });
            @endif
            @if(Session::has('success_out'))
                Swal.fire("Clocked OUT!", "{!!Session::get('success_out')!!}", "success");
            @endif

            $(document).on('submit', '#kt_login_kiosk_form', function(e){
                e.preventDefault();
                var _that=$(this);
                // var button1= $(this).find('button[type="submit"]');
                // console.log(button1)
                var button = KTUtil.getById("kt_login_signin_submit");
                KTUtil.btnWait(button, "spinner spinner-right spinner-white pr-15", "Please wait");
                $(".invalid-feedback").html('');
                $(".is-invalid").removeClass('is-invalid')
                $.ajax({
                    url : $(this).attr('action'),
                    type : 'post',
                    dataType : "json",
                    data : $(this).serialize(),
                    success: function(response) {
                        if(response.status){
                            window.location.href= response.return_url
                        } else {
                            if(response.errors){
                                Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(_that).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                                });
                            }
                        }
                        KTUtil.btnRelease(button);
                    },
                    error: function(response) {
                        KTUtil.btnRelease(button);
                    }
                });
            })
        })
        var new_interval=null;
        var time=5;
        function autoLogout(){
            new_interval= setInterval(() => {
                time--;
                $("#auto_logout").html(`You will be back to home after ${time} seconds`);
                if(time==0){
                    clearInterval(time);
                    window.location.href='{{route('kiosk.logout')}}';
                }
            }, 1000);
        }
    </script>
@endsection