@extends('admin.layout')
@section('content')
<style type="text/css">
	.required-mark
	{
		color: red;
	}
	hr {
		margin-left: 15px;
		margin-bottom:-3px;
	}
	.hr-primary{
		border: 1px solid #3c8dbc;
	}
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}	
	.my-current
	{
		color: #00c0ef;
	}
	#watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
  <section class="content-header">
    <h1> {{ trans('Update Checkpoint') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Update Checkpoint') }}</li>
    </ol>
  </section>
  <section class="content"> 
	@php
		$getUserRoleData = userRoleData();
		$LeadSources		= explode(",",$getUserRoleData->LeadSources);
	@endphp

    <div class="row">
      <div class="col-md-12">
        <div class="box box-info"> 
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
              		<div class="">                        
						<div class="row">
							@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
							@endif
							@if(session()->has('error'))
								<div class="alert alert-warning alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
									{{ session()->get('error') }}
								</div>
							@endif
						</div>
                         <div class="box-body">			 	
                        	{!! Form::open(array('url' => route('check-point.update', [$result['Check_pointsData']['id']]), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'updateLeadSources', 'enctype'=>'multipart/form-data')) !!}
                         		<input type="hidden" name="_method" value="PUT">
                         		<input type="hidden" name="id" id="id" value="{{$result['Check_pointsData']['id']}}">

                         		<div class="form-group">
                                  <label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Report Type') }}  <span class="required-mark">*</span></label>
                                  <div class="col-sm-10 col-md-4">
                                  	<select name="report_type_id" id="report_type_id" class="form-control @error('report_type_id') is-invalid @enderror" >
                                  		<option value="">Select Report Type</option>
                                  		@foreach($result['report_types'] as $report)
                                  			<option value="{{$report->id}}" selected >{{$report->name}}</option>
                                  		@endforeach
                                  	</select>
                                  	@error('report_type_id')
	                                    <span style="color: red" class="invalid-feedback" role="alert">
	                                        <strong>{{ $message }}</strong>
	                                    </span>
	                                @enderror
                                  </div>
                                </div>

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Name') }}  <span class="required-mark">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('name',  $result['Check_pointsData']['name'], array('class'=>'form-control', 'id'=>'name', 'required'=>'required')) !!}
									</div>
								</div>

								<div class="clearfix"></div>
                                <div class="col-md-12">
                                    <table class="table table-bordered table-striped" style="margin-bottom: 20px">
                                        <tbody id="items">
                                            <tr>
                                                <th width="5%">S No.</th>
                                                <th width="25%">Measurement Parameter</th>
                                                <th width="30%">Requirement</th>
                                                <th width="30%">Testing Method</th>
                                                <th width="10%">Add/Remove</th>
                                            </tr>
                                            @php $k = 1; @endphp
                                            @foreach($result['Check_pointsData']['get_details'] as $key)
	                                            <tr class="check-point" id="item-{{$k}}">
	                                                <td>{{$k}}</td>
	                                                <td>
	                                                    <input type="text" name="parameter[]" id="parameter-{{$k}}" class="form-control parameter"  autocomplete="off" value="{{$key->parameter}}">
	                                                    <span style="color: red" class="param" id="param-{{$k}}"></span>
	                                                </td>
	                                                <td>
	                                                    <input type="text" name="requirement[]" id="requirement-{{$k}}" class="form-control requirement" autocomplete="off"  value="{{$key->requirement}}">
	                                                    <span style="color: red" class="req" id="req-{{$k}}"></span>
	                                                </td>
	                                                <td>
	                                                    <input type="text" name="testing_method[]" id="testing_method-{{$k}}" class="form-control testing_method" autocomplete="off" value="{{$key->testing_method}}">
	                                                    <span style="color: red" class="test" id="test-{{$k}}"></span>
	                                                </td>
	                                                <td>
	                                                    @if($k == 1)
                                                            <button type="button" class="btn btn-primary" onclick="add_row();">+</button>
                                                        @else
                                                            <button type="button" class="btn btn-danger" onclick="remove_row({{$k}});">-</button>
                                                        @endif
	                                                </td>
	                                            </tr>
	                                        @php $k++; @endphp
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                              <div class="text-center">
                                <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                <a href="{{URL('admin/check-point')}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                              </div>
                        	{!! Form::close() !!}	
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

		<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</div>


      </div>
    </div>
  </section>
</div>
</div>
@endsection 
@section('scripts')
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
</script>

<script type="text/javascript">
	
	// Alphabets Only
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});	
	
	// Password Check
	$.validator.addMethod("pwcheck", function(value) {
		return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
	});
	
	// Email Check
	$.validator.addMethod("email", function(value) {
		return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
	});
	
	// File Size Validation
	jQuery.validator.addMethod("filesize_max", function(value, element, param) {
		var isOptional = this.optional(element),
			file;

		if(isOptional) {
			return isOptional;
		}
		if ($(element).attr("type") === "file") {

			if (element.files && element.files.length) {

				file = element.files[0];            
				return ( file.size && file.size <= param ); 
			}
		}
		return false;
	}, "File size is too large.");
	
	$( "#updateLeadSources" ).validate( {
			rules: {				
				name: {
					required: true,
					rangelength: [1, 100],
					//alpha: true,
                    // remote: {
                    //     url: '{{URL("admin/check-check-point-for-edit")}}?id=' + $("#id").val(),
                    //     data: {
                    //         name: function () {
                    //             //you need to read this value when the validation is executed, so pass the value as a function which will be called
                    //             return $('#name').val();
                    //         }
                    //     },
                    //     type: "GET"
                    // },
				},
			},
			messages: {
				name: {
					required: "Please enter name",
					alpha: "Please enter name alphabets only",
                    remote: "Name alrady exists",
				},
			},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				// Add the `help-block` class to the error element
				error.addClass( "help-block" );

				// Add `has-feedback` class to the parent div.form-group
				// in order to add icons to inputs
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );

				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}

				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			success: function ( label, element ) {
				// Add the span element, if doesn't exists, and apply the icon classes to it.
				if ( !$( element ).next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			}
		} );


	var No = ;
	function add_row()
	{
		$('#items').append(`
							<tr class="check-point" id="item-${No}">
                                <td>${No}</td>
                                <td>
                                    <input type="text" name="parameter[]" id="parameter-${No}" class="form-control parameter"  autocomplete="off">
                                    <span style="color: red" class="param" id="param-${No}"></span>
                                </td>
                                <td>
                                    <input type="text" name="requirement[]" id="requirement-${No}" class="form-control requirement" autocomplete="off">
                                    <span style="color: red" class="req" id="req-${No}"></span>
                                </td>
                                <td>
                                    <input type="text" name="testing_method[]" id="testing_method-${No}" class="form-control testing_method" autocomplete="off">
                                    <span style="color: red" class="test" id="test-${No}"></span>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger" onclick="remove_row(${No});">-</button>
                                </td>
                            </tr>
						`)
		No++;
	}

	function remove_row(id)
	{
		$('#item-'+id).remove();
	}

	// Validation
    $('#sub').click( function ()
    {
        var bool = false;
        $(".check-point").each(function(){
            var elem = $(this)

            // if(elem.find('.parameter').val() == "")
            // {
            //     bool = true;
            //     elem.find('.param').html('Required Field *');
            // }
            // else
            // {
            //     elem.find('.param').html('');
            // }

            if(elem.find('.requirement').val() == "")
            {
                bool = true;
                elem.find('.req').html('Required Field *');
            }
            else
            {
                elem.find('.req').html('');
            }

            if(elem.find('.testing_method').val() == "")
            {
                bool = true;
                elem.find('.test').html('Required Field *');
            }
            else
            {
                elem.find('.test').html('');
            }
        });
        
        if(bool == true)
        {
            return false;
        }
    })	
</script>
@endsection