@extends('layouts.customapp')

@section('custom-styles')

@endsection

@section('content')

<!-- page-content -->
<div class="page-content">
	<div class="container text-center text-dark">
		<div class="row">
			<div class="col-lg-4 d-block mx-auto">
				<div class="row">
					<div class="col-xl-12 col-md-12 col-md-12">
						<div class="card">
							<div class="card-body">
								<div class="text-center mb-6">
									<img src="{{URL::asset('assets/images/admin/logo.png')}}" class="" alt="">
								</div>
								@if($errors->any())
									<div class="alert alert-danger mb-0" role="alert">
										<span class="alert-inner--icon"><i class="fe fe-slash"></i></span>
										<span class="alert-inner--text"><strong>{{$errors->first()}}</span>
									</div>
								@endif
								
								@if (session('status'))
									<div class="alert alert-success" role="alert">
										<span class="alert-inner--icon"><i class="fe fe-thumbs-up"></i></span>
										<span class="alert-inner--text"><strong>Success!</strong> {{ session('status') }}</span>
									</div>
								    
								@endif

								<form id="member_login" onsubmit="set_login(); return false;"  method="post">
									 @csrf
								<h3>Login</h3>
								<p class="text-muted">Sign In to your account</p>
								<div class="input-group mb-3">
									<span class="input-group-addon bg-white"><i class="fa fa-user"></i></span>
									<input type="text" name="email" value="tong@netdesigngroup.com" class="form-control" placeholder="Email">
								</div>
								<div class="input-group mb-4">
									<span class="input-group-addon bg-white"><i class="fa fa-unlock-alt"></i></span>
									<input type="password" name="password" value="12345678" class="form-control" placeholder="Password">
								</div>
								<div class="row">
									<div class="col-12">
										<button type="submit" class="btn btn-primary btn-block">Login</button>
									</div>
									<div class="col-12">
										<a href="/member/reset-password" class="btn btn-link box-shadow-0 px-0">Forgot password?</a>
									</div>
								</div>
								</form>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
<!-- page-content end -->

@endsection('content')

@section('custom-scripts')

<!--Jquery Sparkline js-->
	<script src="{{URL::asset('assets/plugins/vendors/jquery.sparkline.min.js')}}"></script>

	<!-- File uploads js -->
	<script src="{{URL::asset('assets/plugins/fileuploads/js/dropify.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/fileuploads/js/dropify-demo.js')}}"></script>

	<!--Select2 js -->
	<script src="{{URL::asset('assets/plugins/select2/select2.full.min.js')}}"></script>
	<!-- <script src="{{URL::asset('assets/js/form-elements.js')}}"></script> -->

	<!--MutipleSelect js-->
	<script src="{{URL::asset('assets/plugins/multipleselect/multiple-select.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/multipleselect/multi-select.js')}}"></script>

	<!-- validator js -->
	<script src="{{URL::asset('assets/plugins/validator/js/jquery.validate.min.js')}}"></script>

	<script type="text/javascript">
		$( document ).ready(function() {
			// int_address_zipcode();
		});

		function set_login(){
			event.preventDefault();
		    let _token   = $('meta[name="csrf-token"]').attr('content');
		    var frm_data = new FormData($('#member_login')[0]);
		    $.ajax({
		        url: "/member/login" ,
		        type:"POST",
		        contentType: false,
		        data: frm_data ,
		        processData: false,
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        },
		        beforeSend:function(xhr){
		           
	                var rules = {
	                        email: "required",
	                        password: "required",
	                    }

	                var messages = {
	                        email: "this field is required",
	                        password: "this field is required"
	                    }
		            

		            frm_validate($("#member_login"),rules,messages) ;

		            return $("#member_login").valid();
		            
		        },
		        success:function(resp){
		        	console.log(resp);
		            if(resp.success){
		                window.location.href = '/member/profile' ;
		            }
		        },
		    });
		}

		// form validation
		frm_validate=function(selector,rules, messages){
		    var valid_result = $(selector).validate( {
		        rules: rules,
		        messages: messages,
		        errorPlacement: function ( error, element ) {
		            error.addClass( "invalid-feedback" );
		            if ( element.prop( "type" ) === "checkbox" ) {
		                error.insertAfter( element.next( "label" ) );
		            } else {
		                error.insertAfter( element );
		            }
		        },
		        errorElement: 'div',
		        errorClass: 'invalid-feedback',
		        highlight: function ( element, errorClass, validClass ) {
		            $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
		        },
		        unhighlight: function (element, errorClass, validClass) {
		            $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
		        }
		    } );
		    console.log(valid_result);
		}
	</script>

@endsection