@extends('layouts.app')
@section('title', 'Product Deliverables Mapping')
@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 Name</th>
                                        <th>Deliverable</th>
                                        <th>Optional / Mandatory</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                  @forelse($lists as $k=> $list)
                                  <tr>
                                  	<td>{{++$k}}</td>
                                  	<td>{{$list->getproductname['product_name']}}</td>
                                  	<td>{{$list->getdeliverablename['deliverable_name']}}</td>
                                  	<td>{{($list->optional_or_mandatory == 1)?'Optional': 'Mandatory'}}</td>
                                  	<td>
									  	<div class="custom-control custom-switch">
											<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $list->id }}"  value="{{ $list->id }}" onclick="productMappingStatus(this.value)" @if($list->is_active==1) checked @endif>
											<label class="custom-control-label" for="customSwitch{{ $list->id }}">@if($list->is_active==1) Active @else Inactive @endif</label>
										</div>
									</td>
                                  	<td><span class="edit_row ml-2" onclick="edit('{{ $list->id }}')"><img class="menuicon" src="{{asset('app-assets/assets/images/edit.svg')}}">&nbsp;</span></td>
                                  </tr>
                                  @empty
                                  @endforelse
                                </tbody>
                                </table>
                            
                        </div>
                    </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="deliverable_mappfrm" id="deliverable_mappfrm" 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 Deliverable Mapping</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-4">
			                        <label for="name-input" class="col-form-label">Product <span class="text-danger"> * </span></label>
			                        <Select  required class="form-control" name="product_id" id="product_id">
			                            <option value="">Select Product</option>
			                            @foreach($products as $product)
			                            <option value="{{$product->id}}"> {{$product->product_name}}</option>
			                            @endforeach
			                        </Select>
			                    </div>
			                
			                    <div class="col-lg-4">
			                        <label for="name-input" class="col-form-label">Product Deliverables<span class="text-danger"> * </span></label>
			                        <Select  required class="form-control" name="deliverable_id" id="deliverable_id">
			                            <option value="">Select Deliverable</option>
			                            @foreach($prod_deliverables as $prod_deliverable)
			                            <option value="{{$prod_deliverable->id}}"> {{$prod_deliverable->deliverable_name}}</option>
			                            @endforeach
			                        </Select>
			                    </div>
			                </div>
			           
							<div class="row mt-1">	
			                        <div class="col-lg-4">
			                            <label for="name-input" class="col-form-label">Requirements<span class="text-danger">  </span></label><br>
			                               <input type="radio" name="optional_or_mandatory"  value="1" checked="" >Optional
			                              &nbsp;&nbsp; <input type="radio" name="optional_or_mandatory" value="2">Mandatory
			                        </div>
										
			                <div class="col-lg-4">
						       <label for="example-email-input" class="col-form-label">Is Active ?</label><br>
						       <input type="checkbox" checked value="1" id="is_active" name="is_active" />
					        </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="submitFrm();">Submit</button>
			            </div>
			    	</form>
		    	</div>
	    	</div>
    	</div>
</div>

   <div class="modal fade" id="editModel">
	     	<div class="modal-dialog modal-lg">
	      		<div class="modal-content">
			            <!-- Modal Header -->
			            <div class="modal-header">
			                <h5 class="modal-title">Edit Product Deliverable Mapping</h5>
			                <button type="button" class="close" data-dismiss="modal">&times;</button>
			            </div>

			            <!-- Modal body -->
			            <div class="modal-body">
			            	<form method="post" name="updeliverable_mappfrm" id="updeliverable_mappfrm" role="form" enctype="multipart/form-data">
	                    		@csrf
				            	<div id="edit_data"></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="updatesubmitFrm();">Update</button>
			                    </div>
		                	</form>
		    		</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=  'tab17';
		$(".odtabs").not("#tab17").addClass('btn-outline-secondary');
		$("#tab17").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 Deliverable Mapping</button><br />');
		}
        });
    });

function get_client_prods(client_id)
{		
		$.ajax({

                 url: '/getproduct',
                data: { id:client_id , _token: '{{csrf_token()}}'},
                type: "GET",
                dataType: "json",
                success:function(data) {                      
                    $('select[name="product_id"]').empty();
                     $('select[name="product_id"]').append('<option value="">Select Product</option>');
                    $.each(data, function(key, value) {
                        $('select[name="product_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
}

function submitFrm(){
	if ($("#deliverable_mappfrm").parsley()) {
        if ($("#deliverable_mappfrm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#deliverable_mappfrm")[0]);
           
            if ($('#deliverable_mappfrm').parsley().isValid()) 
            {
				$.ajax({	
				type: "POST",
				cache:false,
				async: false,
				url: "{{ url('/delivarable_mappInsert') }}",
				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'
						});
						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 edit(id) 
{
 
    var url = "{{ route('edit_deliverable_mapp')}}";
    $.ajax({
    	type:'post',
        url:url,
        data: { id:id , _token: '{{csrf_token()}}'},
        dataType:"html",
        success:function(data) 
        {
			
		    $('#editModel').modal('show');
		    $("#edit_data").html(data);
			
        }
    });
    return false;
}

function updatesubmitFrm(){
	
	var url = '{{ route("deliverable_mapp_update") }}';

    if ($("#updeliverable_mappfrm").parsley()) {
		if ($("#updeliverable_mappfrm").parsley().validate()) {
			event.preventDefault();
            var formData = new FormData($("#updeliverable_mappfrm")[0]);
          
	
				$.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'
                            });
                        }
				    },	
                    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'
                        });
                    },
				});
			
		}
	}
}

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