{{\App::setLocale(Session::get('locale'))}}
@extends('user.layout.app')
@section('title', trans('w.dashboard'))
@section('content')
	@includeIf('components.error-success-message')
	 
    <div class="card">
        <div class="card-header">@lang('w.dashboard')</div>
		<div class="card-body">
			<div class="row">
				<div class="col-md-12">
					<form id="frmProdSel" class="form-inline">
						<label for="product_name"  class="mr-sm-2">Product:</label>
						<select required class="form-control mb-2 mr-sm-2" id="product_name" name="product_name">
							<option value="">Select Product</option>
							@forelse($prodListObj as $prodObj)
								<option value="{{ $prodObj->name }}">{{ $prodObj->name }}</option>
							@empty
							@endforelse 
						</select> 
						
						<label for="product_qty"  class="mr-sm-2">Qty:</label>
						<input required type="number" class="form-control mb-2 mr-sm-2" id="product_qty" name="product_qty">
						
						<label for="product_amount"  class="mr-sm-2">Amount:</label>
						<input required type="number" class="form-control mb-2 mr-sm-2" id="product_amount" name="product_amount">
						
						<button type="submit" class="btn btn-primary mb-2">Add</button>
					</form>
				</div>

				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title"><strong>List of Items</strong></h3>
						</div>
						<div class="panel-body">
							<div class="table-responsive">
								<table class="table table-condensed">
									<thead>
										<tr>
											<td><strong>Product</strong></td>
											<td class="text-center"><strong>Price</strong></td>
											<td class="text-center"><strong>Quantity</strong></td>
											<td class="text-right"><strong>Total</strong></td>
											<td class="text-right"><strong></strong></td>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Product A</td>
											<td class="text-center">10</td>
											<td class="text-center">5</td>
											<td class="text-right">50</td>
											<td class="text-right"><button class="btn btn-danger" type="button">x</button></td>
										</tr>
										<tr>
											<td>Product B</td>
											<td class="text-center">10</td>
											<td class="text-center">5</td>
											<td class="text-right">50</td>
											<td class="text-right"><button class="btn btn-danger" type="button">x</button></td>
										</tr>
										
										<tr>
											<td class="thick-line"></td>
											<td class="thick-line"></td>
											<td class="thick-line text-center"><strong>Subtotal</strong></td>
											<td class="thick-line text-right">100</td>
										</tr>
										<tr>
											<td class="no-line"></td>
											<td class="no-line"></td>
											<td class="no-line text-center"><strong>Discount</strong></td>
											<td class="no-line text-right">20</td>
										</tr>
										<tr>
											<td class="no-line"></td>
											<td class="no-line"></td>
											<td class="no-line text-center"><strong>Tax</strong></td>
											<td class="no-line text-right">5</td>
										</tr>
										<tr>
											<td class="no-line"></td>
											<td class="no-line"></td>
											<td class="no-line text-center"><strong>Grand Total</strong></td>
											<td class="no-line text-right">85</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>


				<div class="col-md-12">
					<form id="frmPassword" method="POST">
						@csrf
						<fieldset id="buildyourform">
							<legend>Items</legend>
						</fieldset>
						<input type="submit" value="form" class="btn btn-primary add" id="preview" />
						<input type="button" value="Add a field" class="btn btn-primary add" id="add" />
					</form>
				</div>
			</div>
        </div>
    </div> 
<style>

</style>	
@endsection
@section('extra-script')
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css" />
	@includeIf('components.sweetalert')
	@includeIf('components.jqvalidate')
	<script>
	jQuery(function() {
		var frmProdSel = jQuery("#frmProdSel").validate({
			rules: {
				product_name: {
					required: true,
				},
				product_qty: {
					required: true,
				},
				product_amount: {
					required: true,
				},
			},
			messages: {
				current_password: {
					required: "@lang('Select product required')",
				},
				product_qty: {
					required: "@lang('Quantity required')",
				},
				product_amount: {
					required: "@lang('Amount required')",
				},
			},
			submitHandler: function(event) {
				
				return false;
			}
		});
		var v = jQuery("#frmPassword").validate({
			rules: {
				current_password: {
					required: true,
				},
				password: {
					required: true,
				},
				password_confirmation: {
					required: true,
				},
			},
			messages: {
				current_password: {
					required: "@lang('w.current_password_required')",
				},
				password: {
					required: "@lang('w.password_required')",
				},
				password_confirmation: {
					required: "@lang('w.password_confirmation_required')",
				},
			},
			submitHandler: function(event) {
				swal({
				  title: "",
				  text: "",
				  button: false,
				  icon: "{{asset('images/circle-3.gif')}}",
				});
				jQuery.ajax({
					url: '{{ route("user.purchase.add.submit") }}',
					type: 'POST',
					data: jQuery('#frmPassword').serialize(),
					success: function(data) {
						if (data.error == 200) {
							swal({
								title: "@lang('w.success')",
								text: data.message,
								icon: "success",
							})
							.then(err => {
								if(err){
									window.location.reload(true);
								}else{
									swal.stopLoading();
									swal.close();
								}
							});
						}else{
							swal({
							  title: "@lang('w.error')",
							  text: data.message,
							  button: true,
							  icon: "error",
							});
						}
					}
				});
				return false;
			}
		});
	});
	</script>
<script>
$(document).ready(function() {
    $("#add").click(function() {
        var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
		
        var item_name = $("<input type=\"text\" name=\"item_name[]\" class=\"fieldname\" />");
        var item_qty = $("<input type=\"number\" name=\"item_qty[]\" class=\"fieldname\" />");
        var item_amount = $("<input type=\"text\" name=\"item_amount[]\" class=\"fieldname\" />");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
		
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(item_name);
        fieldWrapper.append(item_qty);
        fieldWrapper.append(item_amount);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});
</script>
@endsection
@section('extra-style')
<style>
body
{
    font-family:Gill Sans MT;
    padding:10px;
}
fieldset
{
    border: solid 1px #000;
    padding:10px;
    display:block;
    clear:both;
    margin:5px 0px;
}
legend
{
    padding:0px 10px;
    background:black;
    color:#FFF;
}
input.add
{
    float:right;
}
input.fieldname
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
select.fieldtype
{
    float:left;
    display:block;
    margin:5px;
}
input.remove
{
    float:left;
    display:block;
    margin:5px;
}
#yourform label
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
#yourform input, #yourform textarea
{
    float:left;
    display:block;
    margin:5px;
}

</style>
@endsection