@extends('layouts.app')

@section('title', 'Product')
@section('content')

</style>
    <div class="container-fluid mt-1">
        <div class="col-lg-12">
            <div class="flex justify-content-center">
                <div class="card ">
                    <div class="card-body" style="border-top: 4px solid #0e7c31">
                        <table width="100%">
                                <tr>
                                    <td width="17%"><button id="sectiontab_1" class="btn btn-sm btn-secondary odtabs" >General Info</button></td>
                                    <td width="17%"><button id="sectiontab_2" class="btn btn-sm btn-outline-secondary odtabs" >Tax Info</button></td>
                                    <td width="17%"><button id="sectiontab_3" class="btn btn-sm btn-outline-secondary odtabs" >Notes</button></td>
                                    <td width="17%"><button id="sectiontab_4" class="btn btn-sm btn-outline-secondary odtabs" > Documents</button></td>
                                    <td width="17%"><button id="sectiontab_5" class="btn btn-sm btn-outline-secondary odtabs" > Search Inquiry</button></td>
                                   
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="card ">
                    <div class="card-body">
                        <h2 class="mt-0 header-title text-center"> Product Names </h2>
                        <button  id="addUser" type="button" class="btn btn-primary dt-buttons mb-3" data-toggle="modal" data-target="#myModal">Add Product</button>
                    </div>
                    <div class="p-3">
                        <table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Product Unique Id</th>
                                    <th>Product Name</th>
                                    <th>Description</th>
                                    <th>Requirements</th>
                                    <th>Is Active</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($getProductList as $k=>$get_product_list)
                                    <tr>
                                        <td>{{++$k}}</td>
                                        <td>{{ $get_product_list->product_uniqueid}}</td>
                                        <td>{{ $get_product_list->product_name}}</td>
                                        <td>{{ $get_product_list->description}}</td>
                                        <td>{{ $get_product_list->requirements}}</td>
                                        <td>{{ $get_product_list->is_active}}</td>
                                        <td>
											<span="javascript:void(0);" onclick="editProductName({{ $get_product_list->id }})" style="cursor:pointer"><img class="menuicon" src="{{asset('app-assets/images/orgicons/edit.svg')}}"></span>
										</td>
                                    </tr>
								@endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- The product name add modal -->
            <div class="modal fade" id="myModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                <form method="post" name="productForm" id="productForm" role="form" enctype="multipart/form-data">
                <input type="hidden" name="userorg_id" id="userorg_id" value="">
                @csrf
                <!-- Modal Header -->
                <div class="modal-header">
                    <h6 class="modal-title" style="text-align: left;font: normal normal bold 16px/13px Poppins;letter-spacing: 0.8px;color: #323232;opacity: 1;"></i>Add User</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Product Name<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <input id="product_name" name="product_name" class="form-control" autocomplete="off" placeholder="Enter Product Name" required>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Description<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <textarea name="description" id="description"></textarea>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Requirements<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <textarea class="ckeditor form-control" name="requirements" id="requirements"></textarea>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Is active<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                     <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="background:#636363;color:#fff;border:#636363;">Cancel</button>
                    <button type="button" class="btn btn-danger" name="submit" id="submit" style="background:#19381A;color:#fff;border:#19381A;" onclick="productNameStore();">Submit</button>
                </div>
                </form>
                </div>
            </div>
            </div>

            <!-- edit product name modal -->

            <div class="modal fade" id="productNameEdit" style="display:none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 1.9rem;">
                <form method="post" name="orgPricingUpdateForm" id="orgPricingUpdateForm" onsubmit="return orgPricingUpdate()" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="orgpricingid" id="orgpricingid">
                <div class="modal-header">
                    <h6 class="modal-title">Edit Org Pricing</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Product Unique Id<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <input id="product_uniqueid" name="product_uniqueid" type="text" class="form-control" autocomplete="off" readonly>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Product Name<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <input id="product_name" name="product_name" class="form-control" autocomplete="off" placeholder="Enter Product Name" required>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Description<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <textarea name="description" id="description"></textarea>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Requirements<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <textarea class="ckeditor form-control" name="requirements" id="requirements"></textarea>
                                </div>
                            </div><br />
                            <div class="form-group row">
                                <label for="example-is_available-input" class="col-sm-4 col-form-label">Is active<span class="text-danger">  <span></label>
                                <div class="col-sm-8">
                                    <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="background:#636363;color:#fff;border:#636363;">Close</button>
                    <button type="submit" class="btn btn-danger" name="submit" id="submit_sdoc" style="background:#19381A;color:#fff;border:#19381A;">Save</button>
                </div>
                </form>
                </div>
            </div>
            </div>
        </div>
    </div>
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#datatable').DataTable( {
            responsive: true,
            dom: 'l<"toolbar">frtip',
        initComplete: function(){
            $("div.toolbar").html('<button style="margin-left: 10px;background:#19381A;color:#fff;border:#19381A" id="addUser" type="button" class="btn btn-primary dt-buttons mb-3" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/images/orgicons/add.svg")}}">&nbsp;Add User</button><br />');           
        } 
        });
    });

function productNameStore(){
	if ($("#productForm").parsley()) {
        if ($("#productForm").parsley().validate()) {
            event.preventDefault();
            if ($(productForm).parsley().isValid()) {
			$.ajax({	
			type: "POST",
			cache:false,
			async: false,
			url: "{{ url('/productInsert') }}",
			data: new FormData($("#productForm")[0]),
			processData: false,
			contentType: false,
			success: function(response) {
				if(response.msg=="Product name Already Exists!"){
					new PNotify({
					title: 'Error',
					text:  response.msg,
					type: 'error'
					});
					return false;
				} else {
					new PNotify({
					title: 'Success',
					text:  response.msg,
					type: 'success'
					});
					localStorage.setItem('lastTab', "#users");
					setTimeout(function(){  location.reload(); }, 1000);
				}
			},
			error:function(response) {
				var errors = response.responseJSON;
				new PNotify({
					title: 'Error',
					text:  errors.msg,
					type: 'error'
					});
				return false;	
			}
			});
			}
		}
	}
}

function editProductName(productnameid) {
    var url = '/product/edit/'+productnameid;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
			console.log(data.result);
		    $('#productNameEdit').modal('show');
			$("input[id='productnameid']").val(data.result.id);
			$("input[name='product_uniqueid']").val(data.result.product_uniqueid);
            $("input[name='product_name']").val(data.result.product_name);
			$("textarea[name='description']").val(data.result.description);
			$("input[name='requirements']").val(data.result.requirements);
			$("input[name='is_active']").val(data.result.is_active);
        }
    });
    return false;
}

function orgPricingUpdate(){
	var id = 2;
	var url = '{{ route("product_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#orgPricingUpdateForm").parsley()) {
		if ($("#orgPricingUpdateForm").parsley().validate()) {
			event.preventDefault();
			if ($("#orgPricingUpdateForm").parsley().isValid()) {
				$.ajax({
					type: "POST",
					cache:false,
					async: false,
					url: url,
					data: new FormData($("#orgPricingUpdateForm")[0]),
					processData: false,
					contentType: false,
					success: function(response) {
						new PNotify({
					title: 'Success',
					text:  response.msg,
					type: 'success'
					});
						//alert(response.msg);
						localStorage.setItem('lastTab', "#orgpricing");
						location.reload();
					},
					error:function(response) {
						var errors = response.responseJSON;
						new PNotify({
					title: 'Error',
					text:  errors.msg,
					type: 'error'
					});
						//alert(errors.msg);
					}
				});
			}
		}
	}
}

</script>
@endsection