@extends('layouts.app')
@section('pageTitle', 'Add Products')
@section('content')
<?php use App\Http\Controllers\ConfigController; ?>
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-2">
		<div class="card" id="form_style">
			<div class="card-header"><a class="btn btn-sm btn-link btn-spacer" title="Back" href="{{url('product.list')}}"><i class="fa fa-chevron-left"></i></a> Add Product</div>
                <div class="card-body">
                
                <div class="alert alert-success offset-2 col-md-8" id="alert" style="display: none;">
					<div id="alert_message"></div>
				</div>
<!-- name
type
ledger_type
amount
labels -->
                    <form class="form-horizontal" method="POST" action="{{url('/product.add.save')}}" id="productAdd">
                        {{ csrf_field() }}


                        <div class="form-group row" id="div-name">
                            <label for="name" class="offset-2 control-label col-md-2 control-label-sm">Name</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control form-control-sm" name="name">
                                        <strong id="error_name"></strong> 
                            </div>
                        </div>

                        <div class="form-group row" id="div-type">
                            <label for="type" class="offset-2 col-md-2 control-label control-label-sm">Type</label>

                            <div class="col-md-6">
                                <select name="type" id="type" class="form-control form-control-sm">
                                	<option value="" ></option>
                                	<option value="f">Fixed</option>
                                	<option value="x">Flexiable</option>
                                </select>
                                        <strong id="error_type"></strong>                          
                            </div>
                        </div>


                        <div class="form-group row" id="div-ledger_type">
                            <label for="ledger_type" class="offset-2 col-md-2 control-label control-label-sm">Ledger Type</label>

                            <div class="col-md-6">
                                <select name="ledger_type" id="ledger_type" class="form-control form-control-sm">
                                	<option value="" ></option>
                                	<option value="r">Revenue</option>
                                	<option value="e">Expense</option>
                                </select>
                                        <strong id="error_ledger_type"></strong>                         
                            </div>
                        </div>

                        <div class="form-group row" id="div-labels">
                            <label for="labels" class="offset-2 col-md-2 control-label control-label-sm">Tax Labels</label>

                            <div class="col-md-6">
                                <select name="labels[]" id="labels" class="form-control form-control-sm" multiple>
                                	<option value="" ></option>
                                	<option value="A">Value Added Tax</option>
                                	<option value="B">Value Added Tax Export</option>
                                	<option value="C">Value AddedTax Excluded</option>
                                	<option value="E">Service Turnover Tax</option>
                                	<option value="F">Environment Climate Adaptation Levy</option>
                                	<option value="P">Plastic Bag Levy</option>
                                	<option value="N">Non-Tax</option>
                                </select>
                                        <strong id="error_labels"></strong>
                                
                            </div>
                        </div>


                        <div class="form-group row" id="div-amount">
                            <label for="amount" class="offset-2 col-md-2 control-label control-label-sm">Amount</label>

                            <div class="col-md-6">
                                <input id="amount" type="number" step=".01" class="form-control form-control-sm" name="amount">
                                        <strong id="error_amount"></strong>
                                
                            </div>
                        </div>


                        <div class="form-group row" id="div-description">
                            <label for="description" class="offset-2 col-md-2 control-label control-label-sm">Desc</label>

                            <div class="col-md-6">
                                <textarea id="description" type="number" rows="4" class="form-control form-control-sm" name="description"></textarea>
                                        <strong id="error_description"></strong>
                                
                            </div>
                        </div>



                        <div class="form-group">
                            <div class="col-md-2 offset-9">
                                <button type="submit" class="btn btn-primary" id="submit">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('#productAdd').submit(function(e){
			e.preventDefault();

			var url,formData;

			url = $(this).attr('action');
			formData = $('#productAdd').serialize();

			$.ajax({
				type:'post',
				data:formData,
				url:url,
				beforeSend:function(){
					$('#submit').addClass('loading');

					$('#alert').fadeOut('slow');
					$('#alert_message').html('');
					
					$('#name').removeClass('is-invalid');
					$('#type').removeClass('is-invalid');
					$('#ledger_type').removeClass('is-invalid');
					$('#labels').removeClass('is-invalid');
					$('#amount').removeClass('is-invalid');

				},
				success:function(data){
					@if(ConfigController::check_privilege('ACCESS_JAVASCRIPT_LOGS'))
	                	console.log(data);
	                @endif

					$('#submit').removeClass('loading');
					
					if(data.message){
						$('#alert').fadeIn('slow');
						$('#alert_message').html(data.message);
					}
				},
				error:function(data){
	            	@if(ConfigController::check_privilege('ACCESS_JAVASCRIPT_LOGS'))
	                	console.log(data.responseText);
	                @endif

					$('#submit').removeClass('loading');					
					
					var obj = jQuery.parseJSON(data.responseText);
					var errors = obj.errors;

					
					if(errors.name){
						$('#name').addClass('is-invalid');
						$('#error_name').addClass('invalid-feedback');
						$('#error_name').html(errors.name);
					}

					
					if(errors.type){
						$('#type').addClass('is-invalid');
						$('#error_type').addClass('invalid-feedback');
						$('#error_type').html(errors.type);
					}

					
					if(errors.ledger_type){
						$('#ledger_type').addClass('is-invalid');
						$('#error_ledger_type').addClass('invalid-feedback');
						$('#error_ledger_type').html(errors.ledger_type);
					}


					if(errors.labels){
						$('#labels').addClass('is-invalid');
						$('#error_labels').addClass('invalid-feedback');
						$('#error_labels').html(errors.labels);
					}

					if(errors.amount){
						$('#amount').addClass('is-invalid');
						$('#error_amount').addClass('invalid-feedback');
						$('#error_amount').html(errors.amount);
					}

				}
			});
		});

	});
</script>
@endsection