@extends('layouts.app')
@section('title', 'Product')
@section('content')
<style>

.add-read-more.show-less-content .second-section,
.add-read-more.show-less-content .read-less {
   display: none;
}

.add-read-more.show-more-content .read-more {
   display: none;
}

.add-read-more .read-more,
.add-read-more .read-less {
   font-weight: bold;
   margin-left: 2px;
   color: blue;
   cursor: pointer;
}

.modal-body #requirementText{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
</style>

   <div class="container-fluid mt-1">
  
   @include('settings.common_tabs')
            <div class="col-lg-12">
                <div class="card ">
                    <div class="card-body">
                        <div class="p-0">
                            <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>Status</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>
                                                <div class="custom-control custom-switch">
                                                    <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $get_product_list->id }}"  value="{{ $get_product_list->id }}" onclick="productStatus(this.value)" @if($get_product_list->is_active==1) checked @endif>
                                                    <label class="custom-control-label" for="customSwitch{{ $get_product_list->id }}">@if($get_product_list->is_active==1) Active @else Inactive @endif</label>
                                                </div>
                                            </td>
                                            <td><span class="edit_user ml-2" onclick="editProductName({{ $get_product_list->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}">&nbsp;</span></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                </table>
                            
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Requirement Text modal popup-->
            <div class="modal" id="requirementModal">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <h5 class="modal-title">Requirements</h5>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- Modal body -->
                        <div class="modal-body">
                            <div id="requirementText"></div>
                        </div>
                        
                    </div>
                </div>
            </div>
             
            <!-- Requirement Text modal popup-->

            <!-- 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">
                    <h5 class="modal-title">Add Product</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6">
                        <label for="name-input" class="col-form-label">Product Name<span class="text-danger"> * <span></label>
                                <input id="product_name" name="product_name" class="form-control" autocomplete="off" placeholder="Enter Product Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" >
                        </div>
                        <div class="col-lg-6">
                            <label for="example-email-input" class="col-form-label">Is Active ?</label><br>
                            <input type="checkbox" checked value="1" id="isactive" name="isactive" />
                        </div>
                    </div>
                    <div class="row mt-1">	
                        <div class="col-lg-12">
                            <label for="name-input" class="col-form-label">Description<span class="text-danger"> * <span></label>
                            <textarea name="description" id="description" required class="form-control"></textarea>
                        </div>
					</div>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" name="submit" id="submit" 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="productUpdateForm" id="productUpdateForm" onsubmit="return productnameUpdate()" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <input type="hidden" name="productnameid" id="productnameid">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Product</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="name-input" class="col-form-label">Product Name<span class="text-danger"> * <span></label>
                                <input id="ed_product_name" name="product_name" class="form-control" autocomplete="off" placeholder="Enter Product Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" >
                            </div>
                            <div class="col-lg-6">
                                <label for="example-email-input" class="col-form-label">Is Active ?</label><br>
                                <input type='hidden' value='0' name='isactive' id="isactive">
                                <input type="checkbox" checked value="1" id="ed_isactive" name="isactive" />
                            </div>
                        </div>
                        <div class="row mt-1">	
                            <div class="col-lg-12">
                                <label for="name-input" class="col-form-label">Description<span class="text-danger"> * <span></label>
                                <textarea name="description" id="ed_description" required class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="productnameUpdate()">Update</button>
                    </div>
                    </form>
                    </div>
                </div>
            </div>
        
    </div>

<script type="text/javascript">
    $(function () {
				@if(Session::has('success'))
				new PNotify({
				title: 'Success',
				delay: 500,
				text:  "{{Session::get('success')}}",
				type: 'success'
				});
						
				@endif
				@if ($errors->any())
				var err = "";
				@foreach ($errors->all() as $error)
				
					new PNotify({
					title: 'Error',
					text: "{{$error}}",
					delay: 800,
					type: 'error'
					});
					@endforeach
				@endif
			});
    $(document).ready(function() {
		var $tabid=  'tab10';
		$(".odtabs").not("#tab10").addClass('btn-outline-secondary');
		$("#tab10").addClass('btn-secondary');

        $('.modal').on('hidden.bs.modal', function() {
		    $(this).find('form')[0].reset();
            $(this).find('form').parsley().reset();
  	    });

        var table = $('#datatable').DataTable( {
            responsive: true,
            dom: 'l<"toolbar">Bfrtip',
            buttons: [
					'excel'
				],
        initComplete: function(){
            $("div.toolbar").html('<button  id="addProduct" type="button" class=" ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Product</button><br />');
		}
        });
    });

    
    // jQuery(function ($) {
  
    // function AddReadMore() {
    //   //This limit you can set after how much characters you want to show Read More.
    //   var carLmt = 120;
    //   // Text to show when text is collapsed
    //   var readMoreTxt = " ...read more";
    //   // Text to show when text is expanded
    //   var readLessTxt = " read less";


    //   //Traverse all selectors with this class and manupulate HTML part to show Read More
    //   $(".add-read-more").each(function () {
    //      if ($(this).find(".first-section").length)
    //         return;

    //      var allstr = $(this).text();
    //      if (allstr.length > carLmt) {
    //         var firstSet = allstr.substring(0, carLmt);
    //         var secdHalf = allstr.substring(carLmt, allstr.length);
    //         var strtoadd = firstSet + "<span class='second-section'>" + secdHalf + "</span><span class='read-more'  title='Click to Show More'>" + readMoreTxt + "</span><span class='read-less' title='Click to Show Less'>" + readLessTxt + "</span>";
    //         $(this).html(strtoadd);
    //      }
    //   });

      //Read More and Read Less Click Event binding
    //   $(document).on("click", ".read-more,.read-less", function () {
    //      $(this).closest(".add-read-more").toggleClass("show-less-content show-more-content");
    //   });
//    }

//    AddReadMore();
// });

function getProducts(){
        window.location.href = "/products";
}

function productNameStore(){
	if ($("#productForm").parsley()) {
        if ($("#productForm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#productForm")[0]);
            if ($(productForm).parsley().isValid()) {
			$.ajax({	
			type: "POST",
			cache:false,
			async: false,
			url: "{{ url('/productInsert') }}",
			data: formData,
			processData: false,
			contentType: false,
			success: function(response) {
				if(response.msg=="Product name Already Exists!"){
					new PNotify({
					title: 'Error',
					text:  response.msg,
					type: 'error',
                    delay: 2000
					});
					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 err = "";
                $.each(response.responseJSON.errors,function(field_name,error){
                    err = err +'<br>' + error;
                });
                new PNotify({
                    title: 'Error',
                    text:err,
                    type: 'error',
                    delay: 2000
                });
            }
			});
			}
		}
	}
}

// function ReadMore(text)
// {
//     $('#requirementModal').modal('show');
//     $(".modal-body #requirementText").html(text.requirements);
// }

function editProductName(productnameid) {
    var url = '/product/edit/'+productnameid;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
            var isActiveValue = data.result.is_active;
		    $('#productNameEdit').modal('show');
			$("#productnameid").val(data.result.id);
            $("#ed_product_uniqueid").prop("readonly", true);
			$("#ed_product_uniqueid").val(data.result.product_uniqueid);
            $("#ed_product_name").val(data.result.product_name);
			$("#ed_description").val(data.result.description);
            if(isActiveValue == 1) {
                $("#ed_isactive").prop("checked", true);
            } else if(isActiveValue == 0) {
                $("#ed_isactive").prop("checked", false);
            }
        }
    });
    return false;
}

function productnameUpdate(){
	var id = $('#productnameid').val();
	var url = '{{ route("product_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#productUpdateForm").parsley()) {
		if ($("#productUpdateForm").parsley().validate()) {
			event.preventDefault();
            var formData = new FormData($("#productUpdateForm")[0]);
			if ($("#productUpdateForm").parsley().isValid()) {
				$.ajax({
					type: "POST",
					cache:false,
					async: false,
					url: url,
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
                        if(response.data =='success')
                        {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                            setTimeout(function(){  location.reload(); }, 800);
                        }
                        else
                        {
                            new PNotify({
                            title: 'Error',
                            text:  response.msg,
                            type: 'error',
                            delay: 2000
                            });
                        }
				    },	
                    error: function(response)
                    {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:  err,
                            type: 'error',
                            delay: 2000
                        });
                    },
				});
			}
		}
	}
}

function productStatus(value) {
    window.location.href = '/productStatus/' + value;
}
</script>
@endsection