@extends('layouts.default') 
@section('title','Assign Consultant Payrates') 
@section('new_button')
    <a href="{!! route('consultnatpayrates.index') !!}" class="btn btn-info btn-Rcircle-iconic waves-effect waves-light">Pay rate list</a>
@endsection
@section('content')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }    
</style>
<!-- page content -->

    {!! Form::open(['method' => 'POST', 'route' => 'consultnatpayrates.store', 'class' => 'form-horizontal', 'autocomplete'=>'off']) !!}
    <div id="listDiv">
        <div class="card allCards" id="div1">
            <div class="row m-0">
                <div class="col-lg-3 col-md-3 col-sm-3 mb-2 pl-0">
                    <small>Select Consultant</small> 
                    {!! Form::select('employee_id', [''=>'Select Consultant']+$consultants, null, ['class'=>'selectpicker',
                    'required', 'data-live-search'=>'true', 'id'=>'employee_id1', 'autocomplete'=>'false', 'onchange'=>'getConsultantPayrates()']) !!}
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 mb-2 pl-0">
                    <small>Consultant Payrate Type</small> 
                    {!! Form::select('con_pay_type', ['0'=>'Hourly', '1'=>'Monthly'], 0, ['class'=>'selectpicker',
                    'required', 'data-live-search'=>'true', 'id'=>'consultantPayrateType', 'autocomplete'=>'false', 'onchange'=>'payrateTypeChanged()']) !!}
                </div>
            </div>
            <div class="row mt-2">
                {{-- VENDOR NAME --}}
                <div class="col-md-2">
                    {!! Form::textGroup('vendor_name[]', 'Vendor Company Name', null, ['required', 'id'=>'vendor_name1', 'onkeydown'=>'vendorList(1)']) !!}
                    {!! Form::hidden('vendor_id[]', null, ['id'=>'vendor_id1']) !!}
                </div>
                {{-- VENDOR REG PAYRATES --}}
                <div class="col-md-2">
                    {!! Form::numberGroup('vendor_payrate_reg[]', 'Vendor Payrate - Reg', null, ['required', 'id'=>'vendor_payrate_reg1']) !!}
                </div>
                {{-- VENDOR OT PAYRATE --}}
                <div class="col-md-2">
                    {!! Form::numberGroup('vendor_payrate_ot[]', 'Vendor Payrate - OT', null, ['required', 'id'=>'vendor_payrate_ot1']) !!}
                </div>
                {{-- FROM HOURS --}}
                <div class="col-md-2 hours">
			         <div class="form-group">
			             <input class="form-control change" placeholder="" id="from1" name="from[]" type="number" data-dirrty-initial-value="" data-is-dirrty="false" min="1" value="1" onkeyup="changeFrom(1)">
			             <label for="from" class="form-label">From Hours</label>
			             <span class="form-controlBrd"></span> 
			         </div>
                 </div>
                 {{-- TO HOURS --}}
			     <div class="col-md-2 hours">
			         <div class="form-group">
			             <input class="form-control change" placeholder="" id="to1" name="to[]" type="number" data-dirrty-initial-value="" data-is-dirrty="false" onkeyup="changeTo(1)" min="1000"value="1000">
			             <label for="to" class="form-label">To Hours</label>
			             <span class="form-controlBrd"></span> 
			         </div>
                 </div>
                 {{-- FROM MONTH --}}
                 <div class="col-lg-2 col-md-2 col-sm-6 months" style="display: none;">
                    <div class="form-group">
                        <input class="form-control" type="text" name="from_date[]" id="from_date1">
                        <label for="from_date" class="form-label">From Date *</label>
                        <span class="form-controlBrd"></span>                
                    </div>
                </div>
                 {{-- TO MONTH --}}
                 <div class="col-md-2 months" style="display: none;">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="" id="to_date1" name="to_date[]" type="date">
                        <label class="form-label">To Date *</label>
                        <span class="form-controlBrd"></span>
                    </div>
                </div>
                 {{-- PAYRATE TYPE --}}
                <div class="col-md-2">
                    <small> Type</small> 
                    {!! Form::select('rate_type[]', ['fixed'=>'Fixed', 'percentage'=>'Percentage'], 'fixed',
                    ['class'=>'selectpicker', 'required', 'id'=>'rate_type1', 'onchange'=>'changeIcon(1)']) !!}
                </div>
                {{-- IF FIXED- Consultant Reg Payrates --}}
                <div class="col-md-3 rate1">
                    <div class="form-group">
                        <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                        <input type="number" id="reg_rate1" class="form-control form-controlLftIcon" name="reg_rate[]">
                        <label class="form-label form-labelLftIcon">Consultant Salary Annual</label>
                        <span class="form-controlBrd-Left"></span>
                    </div>
                </div>
                {{-- IF FIXED- Consultant OT Payrates --}}
                <div class="col-md-3 rate1">
                    <div class="form-group">
                        <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                        <input type="number" id="ot_rate1" class="form-control form-controlLftIcon" name="ot_rate[]"  onkeyup="findConsultantOt(1)">
                        <label class="form-label form-labelLftIcon">Consultant Payrate - OT</label>
                        <span class="form-controlBrd-Left"></span>
                    </div>
                </div>
                {{-- IF PERCENT  REG --}}
                    {{-- CONSULTANT PERCENTAGE REG --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="consultant_percent_reg1" class="form-control form-controlLftIcon" name="consultant_percent_reg[]" onkeyup="consultantRegPercentage(1)">
                            <label class="form-label form-labelLftIcon">Consultant Percentage - Reg</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- CONSULTANT PAYRATE REG --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="consultant_payrate_reg1" class="form-control form-controlLftIcon" name="consultant_payrate_reg[]">
                            <label class="form-label form-labelLftIcon">Consultant Payrate - Reg</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- EMPLOYER PERCENTAGE REG --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="company_percent_reg1" class="form-control form-controlLftIcon" name="company_percent_reg[]">
                            <label class="form-label form-labelLftIcon">Employer Percentage - Reg</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- EMPLOYER PAYRATE REG --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="company_payrate_reg1" class="form-control form-controlLftIcon" name="company_payrate_reg[]">
                            <label class="form-label form-labelLftIcon">Employer Payrate - Reg</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>

                {{-- IF PERCENT  OT --}}
                    {{-- CONSULTANT PERCENTAGE OT --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="consultant_percent_ot1" class="form-control form-controlLftIcon" name="consultant_percent_ot[]" onkeyup="consultantOtPercentage(1)">
                            <label class="form-label form-labelLftIcon">Consultant Percentage - OT</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- CONSULTANT PAYRATE OT --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="consultant_payrate_ot1" class="form-control form-controlLftIcon" name="consultant_payrate_ot[]">
                            <label class="form-label form-labelLftIcon">Consultant Payrate - OT</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- EMPLOYER PERCENTAGE OT --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="company_percent_ot1" class="form-control form-controlLftIcon" name="company_percent_ot[]">
                            <label class="form-label form-labelLftIcon">Employer Percentage - OT</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
                    {{-- EMPLOYER PAYRATE OT --}}
                    <div class="col-md-3 percent1" style="display: none;">
                        <div class="form-group">
                            <span class="iconSpan1"><i class="material-icons form-controlIcon">monetization_on</i></span>
                            <input type="number" id="company_payrate_ot1" class="form-control form-controlLftIcon" name="company_payrate_ot[]">
                            <label class="form-label form-labelLftIcon">Employer Payrate - OT</label>
                            <span class="form-controlBrd-Left"></span>
                        </div>
                    </div>
            </div>
        </div>
    </div>

   
   <button type="button" onclick="addNew()" data-toggle="tooltip" title="Add" class="btn btn-xs  btn-outline-info btn-circle-iconic btn34" data-original-title="Add"><i class="material-icons">add </i></button>
    <div class="btn-group pull-right">
    </div>

    {!! Form::close() !!}

    <div class="card" style="width:100%;">
        <h4>Previous Payrates List</h4>
        <div id="payratesDiv" class="text-center">
            Please Select Consultant
        </div>
    </div>
</div>
<!-- /page content -->
@include('includes.datepicker')
<input type="text" name="" id="usableTo">
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="YourJquery source path"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script>
    /* REQUIRED SCIPT */
    $(document).ready(function(){
        //Date picker
        $('#from_date1').datepicker({
            format: '{{ $date_format }}',
            autoclose: true
        });
        //Date picker
        $('#to_date1').datepicker({
            format: '{{ $date_format }}',
            autoclose: true
        });
    });

    /* GET CONSULTANT PREVIOUS PAYRATES */
    function getConsultantPayrates() {
        var con_id = $("#employee_id1").val();
        if(con_id != '') {
            $.ajax({
                url: '/consultant_payrates_list',
                data: 'con_id='+con_id,
                success: function(result) {
                    $("#payratesDiv").html(result);
                }
            })
        } else {
            $("#payratesDiv").html('Please Select Consultant');
        }
    }

    /* Get Vendor List */
	function vendorList(id) {
		var availableTags = '