@extends('layouts.app')
@section('title', 'Client Product 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="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>
                                        @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                        <th>Customer Name</th>
                                        @endif
                                        <th>Client Name</th>
                                        <th>Product Name</th>
                                        <th>Requirements</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
							    </thead>
                                <tbody>
                                    @foreach($getMappingList as $k=>$get_mapping_list)
                                    <tr>
                                        <td> {{++$k}}</td>
                                        @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                                        <td> {{(isset($get_mapping_list->getCustomerName['customer_name']) ? $get_mapping_list->getCustomerName['customer_name'] : '')}}</td>
                                        @endif
                                        <td> {{(isset($get_mapping_list->getClientName['client_name']) ? $get_mapping_list->getClientName['client_name'] : '')}}</td>
                                        <td> {{(isset($get_mapping_list->getProductName['product_name']) ? $get_mapping_list->getProductName['product_name'] : '')}}</td>
                                        <td class="add-read-more show-less-content" onClick="ReadMore({{ $get_mapping_list}})">
                                            <span  class="btn-primary btn-sm">View</span>
                                        </td>
                                        <td>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $get_mapping_list->id }}"  value="{{ $get_mapping_list->id }}" onclick="mappingStatus(this.value)" @if($get_mapping_list->is_active==1) checked @endif>
                                                <label class="custom-control-label" for="customSwitch{{ $get_mapping_list->id }}">@if($get_mapping_list->is_active==1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <span  class="edit_mapping ml-2" onclick="editMapping({{ $get_mapping_list->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}">&nbsp;</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
						    </table>
					    </div>
				</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>
<!-- End -->
    
<!-- Add Mapping model -->
	<div class="modal fade" id="cpmappingModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Add Client Product Mapping</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="cpmappingfrm" name="cpmappingfrm"  data-parsley-validate data-parsley-trigger="keyup">
					@csrf
					<div class="modal-body">
						<div class="row">
                            @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                            <div class="col-lg-4">
								<label for="client_select" class="col-form-label"> Customer <span class="text-danger"> * </span></label>
								<select required class="form-control" name="customer_id" id="customer_id">
									<option value="">Select Customer</option>
									@forelse($getCustomers as $customer_list)
									<option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
                            @endif
							<div class="col-lg-4">
								<label for="client_select" class="col-form-label"> Client <span class="text-danger"> * </span></label>
								<select required class="form-control" name="client_id" id="client_id">
									<option value="">Select Client</option>
                                    @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)

                                    @else
                                        @forelse($getClients as $client_list)
                                        <option value="{{$client_list->id}}"> {{$client_list->client_name}}</option>
                                        @empty
                                        @endforelse
                                    @endif

									
								</select>
							</div>
                            <div class="col-lg-4">
								<label for="company_select" 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>
                                    @forelse($getProducts as $product_list)
									<option value="{{$product_list->id}}"> {{$product_list->product_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
						</div>
                        <div class="row">	
                            <div class="col-lg-12">
                                <label for="name-input" class="col-form-label">Requirements</label>
                                <textarea class="form-control" name="requirements" id="requirements" required></textarea>
                            </div>
					    </div>
                        <div class="row">	
                            <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>
					</div>
					<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="mappingStore();">Submit</button>
                    </div>
				</form>
			</div>
		</div>
	</div>

    <!-- edit Mapping modal -->
    <div class="modal fade" id="cpmappingEdit" style="display:none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 1.9rem;">
                <form method="post" name="cpmappingUpdateForm" id="cpmappingUpdateForm" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="map_id" id="map_id">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Client Product Mapping</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)
                        <div class="col-lg-4">
                            <label for="client_select" class="col-form-label"> Customer <span class="text-danger"> * </span></label>
                            <select required class="form-control" name="customer_id" id="ed_customer_id">
                                <option value="">Select Customer</option>
                                @forelse($getCustomers as $customer_list)
                                <option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                        @endif
                        <div class="col-lg-4">
                            <label for="client_select" class="col-form-label"> Client <span class="text-danger"> * </span></label>
                            <select required class="form-control" name="client_id" id="ed_client_id">
                                <option value="">Select Client</option>
                                @if(auth()->user()->user_role_id != 3 && auth()->user()->user_role_id != 4)

                                @else
                                    @forelse($getClients as $client_list)
                                    <option value="{{$client_list->id}}"> {{$client_list->client_name}}</option>
                                    @empty
                                    @endforelse
                                @endif
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="company_select" class="col-form-label"> Product <span class="text-danger"> * </span></label>
                            <select required class="form-control" name="product_id" id="ed_product_id">
                                <option value="">Select Product</option>
                                @forelse($getProducts as $product_list)
                                <option value="{{$product_list->id}}"> {{$product_list->product_name}}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="row">	
                        <div class="col-lg-12">
                            <label for="name-input" class="col-form-label">Requirements<span class="text-danger">  <span></label>
                            <textarea class="form-control" name="ed_requirements" id="ed_requirements" required></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">	
                            <label for="example-email-input" class="col-form-label">Is Active ?</label><br>
                            <input type="checkbox" value="1" id="ed_is_active" name="is_active" />
                        </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="mappingUpdate()">Update</button>
                </div>
                </form>
                </div>
            </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() 
{
    $(".odtabs").not("#tab18").addClass('btn-outline-secondary');
    $("#tab18").addClass('btn-secondary');

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

	$('select[name="customer_id"]').on('change', function() {
        var customerID = $(this).val();
        if(customerID) {
            $.ajax({
                url: '/getclient',
                data: { id:customerID , _token: '{{csrf_token()}}'},
                type: "GET",
                dataType: "json",
                success:function(data) {                      
                    $('select[name="client_id"]').empty();
                    $('select[name="client_id"]').append('<option value="">Select Client</option>');
                    $.each(data, function(key, value) {
                        $('select[name="client_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
        }else{
            $('select[name="client_id"]').empty();
        }
    });

    CKEDITOR.replace('requirements');
	window.ParsleyValidator
			.addValidator('fileextension', function (value, requirement) {
			var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();
        var table = $('#datatable').DataTable( {
        responsive: true,
        dom: 'l<"toolbar">Bfrtip',
		buttons: [
					'excel'
				],
        initComplete: function(){
        $("div.toolbar").html('<button type="button" class=" ml-2 btn btn-primary" data-toggle="modal" data-target="#cpmappingModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Product Client Mapping</button><br />');
    }
    });
});

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

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";

    $(".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);
       }
    });
 }
    AddReadMore();
});

function mappingStore() { 
	if ($("#cpmappingfrm").parsley()) {
        if ($("#cpmappingfrm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#cpmappingfrm")[0]);
            $requirementsValue = CKEDITOR.instances.requirements.getData();
            formData.append("requirementsValue", $requirementsValue);
            if ($(cpmappingfrm).parsley().isValid()) {
				$.ajax({	
					type: "POST",
					cache:false,
					async: false,
					url: "{{ url('/client_product_mappInsert') }}",
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
                        if(response.msg=="Mapping Already Exists!"){
                            new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error',
                                delay: 1000
                            });
                            return false;
                        } else {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 800);
                        }
					},
					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 editMapping(mappingid) {
    CKEDITOR.replace('ed_requirements');
    var url = '/edit_client_product_mapp/'+mappingid;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
            var reqValue = data.result.requirements;
            var requirementsValue = CKEDITOR.instances.ed_requirements.setData(reqValue);
            var isActiveValue = data.result.is_active;
            $('#cpmappingEdit').modal('show');
            $("#map_id").val(data.result.id);
            var customerID = data.result.customer_id;
            var clientId = data.result.client_id;
			if(customerID) {
				$.ajax({
					url: '/getclient',
					data: { id:customerID , _token: '{{csrf_token()}}'},
					type: "GET",
					dataType: "json",
					success:function(data) {                      
						$("#ed_client_id").empty();
						$.each(data, function(key, value) {
                            if(key == clientId)
							{
								$("#ed_client_id").append('<option value="'+ key +'" selected="selected"    >'+ value +'</option>');
							}
							else
							{
                                $("#ed_client_id").append('<option value="'+ key +'">'+ value +'</option>');
							}
						});
					}
				});
			} else {
				$('select[name="client_id"]').empty();
			}
            $("#ed_customer_id").val(data.result.customer_id);
            $("#ed_product_id").val(data.result.product_id);
            if(isActiveValue == 1) {
                $("#ed_is_active").prop("checked", true);
            } else if(isActiveValue == 0) {
                $("#ed_is_active").prop("checked", false);
            }
        }
    });
    return false;
}

function mappingUpdate(){
	var id = $('#map_id').val();
	var url = '{{ route("client_product_mapping_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#cpmappingUpdateForm").parsley()) {
		if ($("#cpmappingUpdateForm").parsley().validate()) {
			event.preventDefault();
            var formData = new FormData($("#cpmappingUpdateForm")[0]);
            $requirementsValue = CKEDITOR.instances.ed_requirements.getData();
            formData.append("requirementsValue", $requirementsValue);
			if ($("#cpmappingUpdateForm").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 mappingStatus(value) {
    window.location.href = '/clientProductMappingStatus/' + value;
}

</script>
@endsection