@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">Kiosk Login <br><small>Clock In / Clock Out</small></h2>
		<p class="text-muted font-weight-bold">Enter your Member ID</p>
	</div>
	<!--begin::Form-->
	<form class="form" novalidate="novalidate" id="kt_login_kiosk_form" action="{{route('kiosk.ajax.login')}}">
		{{csrf_field()}}
		<div class="form-group py-3 m-0">
			<input class="form-control form-control-solid h-auto py-5 px-6" type="text" placeholder="Member ID" name="member_id" autocomplete="off" />
			<span class="invalid-feedback"></span>
		</div>
		<div class="form-group d-flex flex-wrap justify-content-between align-items-center mt-2">
			<button id="kt_login_signin_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3">Submit</button>
		</div>
	</form>
	<!--end::Form-->
</div>
<!--end::Signin-->		
@endsection
@section('page_js')
    <script>
        $(document).ready(function(){
            $(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);
                    }
                });
            })
        })
    </script>
@endsection