@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>
								

								<form id="frm_add_product_to_cart" onsubmit="set_add_product_to_cart(); return false;"  method="post">
									 @csrf
								<h3>Login</h3>
								<p class="text-muted">Add product to cart</p>
								<div class="input-group mb-3">
									<label class="form-label">product-item-id</label>
									<input type="text" name="product_item_id" value="5" class="form-control" placeholder="5">
								</div>
								<div class="input-group mb-4">
									<label class="form-label">quantity</label>
									<input type="text" name="quantity" value="1" class="form-control" placeholder="1">
								</div>
								<div class="input-group mb-4">
									<label class="form-label">force_set_quantity</label>
									<input type="text" name="force_set_quantity" value="0" class="form-control" placeholder="0">
								</div>
								<div class="row">
									<div class="col-12">
										<button type="submit" class="btn btn-primary btn-block">Add</button>
									</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_add_product_to_cart(){
			event.preventDefault();
		    let _token   = $('meta[name="csrf-token"]').attr('content');
		    var frm_data = new FormData($('#frm_add_product_to_cart')[0]);
		    $.ajax({
		        url: "{{ route('order.add_product_to_cart') }}" ,
		        type:"POST",
		        contentType: false,
		        data: frm_data ,
		        processData: false,
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        },
		        beforeSend:function(xhr){
		           
	                var rules = {
	                        product_item_id: "required",
	                        quantity: "required",
	                    }

	                var messages = {
	                        product_item_id: "this field is required",
	                        quantity: "this field is required"
	                    }
		            

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

		            return $("#frm_add_product_to_cart").valid();
		            
		        },
		        success:function(resp){
		        	console.log(resp);
		        },
		    });
		}

		// 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