@extends('layouts.app')
@section('title', 'Client Product Cost')
@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>
                                        <th>Client Name</th>
                                        <th>Product Name</th>
                                        <th>State</th>
                                        <th>County</th>
                                        <th>Cost</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
							    </thead>
                                <tbody>
                                    @foreach($getCostList as $k=>$get_cost_list)
                                    <tr>
                                        <td> {{++$k}}</td>
                                        <td> {{(isset($get_cost_list->getClientName['client_name']) ? $get_cost_list->getClientName['client_name'] : '')}}</td>
                                        <td> {{(isset($get_cost_list->getProductName['product_name']) ? $get_cost_list->getProductName['product_name'] : '')}}</td>
                                         <td> {{(isset($get_cost_list->getState['state_name']) ? $get_cost_list->getState['state_name'] : '')}}</td>
                                          <td> {{(isset($get_cost_list->getCounty['county_name']) ? $get_cost_list->getCounty['county_name'] : '')}}</td>
                                        <td> $ &nbsp;{{ number_format($get_cost_list->cost,2)}}
                                     
                                        <td>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox"  class="custom-control-input" id="customSwitch{{ $get_cost_list->id }}"  value="{{ $get_cost_list->id }}" onclick="costStatus(this.value)" @if($get_cost_list->is_active==1) checked @endif>
                                                <label class="custom-control-label" for="customSwitch{{ $get_cost_list->id }}">@if($get_cost_list->is_active==1) Active @else Inactive @endif</label>
                                            </div>
                                        </td>
                                        <td>
                                            <span  class="edit_mapping ml-2" onclick="editCost({{ $get_cost_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="addcostModal" 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 Cost</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="addcostfrm" name="addcostfrm"  data-parsley-validate data-parsley-trigger="keyup">
					@csrf
					<div class="modal-body">
						<div class="row">
							<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>
                                    @forelse($getClients as $client_list)
                                        <option value="{{$client_list->id}}"> {{$client_list->client_name}}</option>
                                    @empty
                                    @endforelse
								</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 class="col-lg-4">
                                <label for="name-input" class="col-form-label">Cost<span class="text-danger"> * <span></label>
                                <input id="cost" type="number" name="cost" class="form-control" autocomplete="off" placeholder="Enter Cost" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="numeric|[0-9]">
                            </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="costStore();">Submit</button>
                    </div>
				</form>
			</div>
		</div>
	</div>

    <!-- edit Mapping modal -->
    <div class="modal fade" id="costEdit" style="display:none;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="border-radius: 1.9rem;">
                <form method="post" name="costUpdateForm" id="costUpdateForm" enctype="multipart/form-data" autocomplete="off">
                @csrf
                <input type="hidden" name="cost_id" id="cost_id">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Client Product Cost</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <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>
                                    @forelse($getClients as $client_list)
                                    <option value="{{$client_list->id}}"> {{$client_list->client_name}}</option>
                                    @empty
                                    @endforelse
                            </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 class="col-lg-4">
                            <label for="name-input" class="col-form-label">Cost<span class="text-danger"> * <span></label>
                            <input id="ed_cost" type="text" name="cost" class="form-control" autocomplete="off" placeholder="Enter Cost" required data-parsley-trigger="focusout">
                        </div>
                    </div>
                    <div class="row">	
                        <div class="col-lg-4">
                            <label for="state_select" class="col-form-label"> State <span class="text-danger"> * <span></label>
                            <select required class="form-control" name="state" id="edit_state" onchange="get_county(this.value)">
                                <option value="">Select State</option>
                                @foreach($getStates as $state)
                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="county_select" class="col-form-label"> County <span class="text-danger"> * <span></label>
                            <select required class="form-control" name="county" id="edit_county">
                                <option value="">Select County</option>
                                @foreach($getCounties as $county)
                                    <option value="{{ $county->id }}">{{ $county->county_name }}</option>
                                @endforeach
                            </select>
                        </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="costUpdate()">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("#tab19").addClass('btn-outline-secondary');
    $("#tab19").addClass('btn-secondary');

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

  

        var table = $('#datatable').DataTable( {
        responsive: true,
        dom: 'l<"toolbar">Bfrtip',
		buttons: [
					'excel'
				],
        initComplete: function(){
        $("div.toolbar").html('<a href="{{route('add_client_product_cost')}}"><button type="button" class="ml-2 btn btn-primary"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Client Product Cost</button></a><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 costStore() { 
	if ($("#addcostfrm").parsley()) {
        if ($("#addcostfrm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#addcostfrm")[0]);
            $requirementsValue = CKEDITOR.instances.requirements.getData();
            formData.append("requirementsValue", $requirementsValue);
            if ($(addcostfrm).parsley().isValid()) {
				$.ajax({	
					type: "POST",
					cache:false,
					async: false,
					url: "{{ url('/client_product_costInsert') }}",
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
                        if(response.msg=="Cost 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 editCost(costid) 
{
    // var url = '/edit_client_product_cost/'+costid;
    // $.ajax({
    //     url:url,
    //     dataType:"json",
    //     success:function(data) {
    //         var isActiveValue = data.result.is_active;
    //         $('#costEdit').modal('show');
    //         $("#cost_id").val(data.result.id);
    //         $("#ed_client_id").val(data.result.client_id);
    //         $("#ed_product_id").val(data.result.product_id);
    //         $("#ed_cost").val(data.result.cost);
    //         $("#edit_state").val(data.result.state);
    //         $("#edit_county").val(data.result.county);
    //         if(isActiveValue == 1) 
    //         {
    //             $("#ed_is_active").prop("checked", true);
    //         } 
    //         else if(isActiveValue == 0) 
    //         {
    //             $("#ed_is_active").prop("checked", false);
    //         }
    //     }
    // });
    // return false;
     window.location.href = '/update_client_product_cost/'+costid;
}

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

</script>
@endsection