<!DOCTYPE html>

<html>

<head>

	<title>	</title>



<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!------ Include the above in your HEAD tag ---------->



</head>

<body>

<br><br>
 <header style=" text-align:center;">
        <br>        <br>
        <a href = "CLOSE" style="margin-top: -150px;"><img src="https://image.flaticon.com/icons/svg/93/93634.svg" class="img-responsive" style="height:50px"></a>
    </header>
	<form action="post.php" method="POST">	

		<div class="container">

		  <center>	<h2>Business Expenses</h2></center><br><br><br>	



				<div class="container">

				  <div class="row clearfix">

				    <div class="col-md-12">

				      <table class="table table-bordered table-hover" id="tab_logic">

				        <thead>

				          <tr>

				            <th class="text-center"> # </th>

				            <th class="text-center"> Expenses Type </th>

				            <th class="text-center"> Date </th>

				            <th class="text-center"> Price </th>

				            <th class="text-center"> Remove Row </th>

				          </tr>

				        </thead>

				        <tbody>

				          <tr id='addr0'>

				            <td>1</td>



				            <td>

				            	<select class="form-control" name="expenses_type[]">

				            		<option value="">Select Expense</option>

				            		<option value="Postage & Stationary">Postage & Stationary</option>

				            		<option value="Mobile Phone">Mobile Phone</option>

				            		<option value="Landline Phone">Landline Phone</option>

				            		<option value="Broadband & Sky/Netflix">Broadband & Sky/Netflix</option>

				            		<option value="Workwear & Tools">Workwear & Tools</option>

				            		<option value="Advertising & Marketing">Advertising & Marketing</option>

				            		<option value="Public Liablilty Insurance">Public Liablilty Insurance</option>

				            		<option value="CPC Training Costs">CPC Training Costs</option>

				            		<option value="Medicals & Glasses">Medicals & Glasses</option>

				            		<option value="Booking & Subscriptions">Booking & Subscriptions</option>

				            	</select>

				            </td>

				            <td><input type="date" name='expense_date[]'  placeholder='Enter Product Name' class="form-control"/></td>

				            <td><input type="number" name='price[]' placeholder='0.00' class="form-control" /></td>

				            <td><center>

				             <button type="button" class="deletebtn btn btn-default" title="Remove row">Remove Row</button>

				            	</center>

				            </td>

				          </tr>

				          <tr id='addr1'></tr>

				        </tbody>

				      </table>

				    </div>

				  </div>

				  <div class="row clearfix">

				    <div class="col-md-12">

				      <input type="button" id="add_row" class="btn btn-default pull-left" value="Add Row">

				    </div>

				  </div>

				 <!--  <div class="row clearfix" style="margin-top:20px">

				    <div class="pull-right col-md-4">

				      <table class="table table-bordered table-hover" id="tab_logic_total">

				        <tbody>

				          <tr>

				            <th class="text-center">Sub Total</th>

				            <td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" readonly/></td>

				          </tr>

				        </tbody>

				      </table>

				    </div>

				  </div> -->

				</div>



				<br><br><br>		



			<button type="submit" name="savebusiness" class="btn btn-primary" onclick="save()">Submit</button>

		</div>

	</form>

</body>

</html>









<script type="">



		$(document).on('click', 'button.deletebtn', function () {

     $(this).closest('tr').remove();

     return false;

 });



$(document).ready(function(){

    var i=1;

    $("#add_row").click(function(){b=i-1;

      	$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);

      	$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');

      	i++; 

  	});

    $("#delete_row").click(function(){

    	if(i>1){

		$("#addr"+(i-1)).html('');

		i--;

		}

		calc();

	});

	

	$('#tab_logic tbody').on('keyup change',function(){

		calc();

	});

	$('#tax').on('keyup change',function(){

		calc_total();

	});

	



});



function calc()

{

	$('#tab_logic tbody tr').each(function(i, element) {

		var html = $(this).html();

		if(html!='')

		{

			var qty = $(this).find('.qty').val();

			var price = $(this).find('.price').val();

			$(this).find('.total').val(qty*price);

			

			calc_total();

		}

    });

}



function calc_total()

{

	total=0;

	$('.total').each(function() {

        total += parseInt($(this).val());

    });

	$('#sub_total').val(total.toFixed(2));

	tax_sum=total/100*$('#tax').val();

	$('#tax_amount').val(tax_sum.toFixed(2));

	$('#total_amount').val((tax_sum+total).toFixed(2));

}

</script>



<script type="text/javascript">

                  function save(){

                  swal({

  title: "Data has Been Successfully Saved!",

  text: "Data Saved!",

  icon: "success",

  button: "Done!",

});

                }

                </script>





                

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>