@extends('layouts/microfin_layout')
@section('title', '| OTS Employee Incentive Configuration')
@section('content')
@include('successMsg')

<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-3"></div>
        <div class="col-md-6 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{url('mfn/otsEmployeeIncentiveConfiguration/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>View Configuration List</a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">OTS Employee Incentive Configuration</div>
                </div>
                {!! Form::open(array('url' => '#', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}
                
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                {!! Form::label('effectiveDate', 'Effective Date:', ['class' => 'col-sm-4 control-label']) !!}
                                <div class="col-sm-6">
                                    {!! Form::text('effectiveDate', null, ['class'=>'form-control input-sm readonly', 'type' => 'text']) !!}
                                    <p id='effectiveDatee' style="max-height:3px;"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel-heading">
                        <div class="panel-subtitle"><h4>Add Steps:</h4></div>
                    </div>

                    <div class="row">
                        <table class="table table-bordered table-striped table-condensed">

                            <thead>
                            
                                    <th style="width: 5%;">SL#</th>
                                    <th>Amount Slab</th>
                                    <th>Percentage</th>
                                    <th style="width: 11%;">Action</th>
                          
                            </thead>

                            <tbody class="appendStepsTr" id="dynamic_field">
                                <tr class="toClone">
                                                                        <td class="tdSl">
                                        {{ ++$no }}
                                    </td>
                                    <td>
                                        {!! Form::text('amount[]', $value = null, ['class' => 'form-control number', 'id' => 'amount', 'type' => 'text', 'autocomplete'=>'off', 'style' => 'text-align: right']) !!}
                                    </td>
                                    <td>
                                        {!! Form::text('percentage[]', $value = null, ['class' => 'form-control number', 'id' => 'percentage', 'type' => 'text', 'autocomplete'=>'off', 'style' => 'text-align: right']) !!}
                                    </td>
                                    <td>
                                        <button type="button" name="add" class="btn btn-success btn_add" style="background-color: #28A745;">+</button>
                                        <button type="button" name="remove" class="btn btn-danger btn_remove" style="background-color: #AB2D32">x</button>
                                    </td>
                                </tr>
                            </tbody>

                        </table><br>

                        <div class="form-group">
                            {!! Form::label('submit', ' ', ['class' => 'col-sm-5 control-label']) !!}
                            <div class="col-sm-5">
                                {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                <a href="{{ url('mfn/otsEmployeeIncentiveConfiguration/') }}"
                                    class="btn btn-danger closeBtn">Close</a>
                                <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                            </div>
                        </div>

                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>


<script>

    $(document).ready(function(){

        $("#effectiveDate").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
        });

        $(document).on("input", ".number", function() {
            this.value = this.value.replace(/[^0-9\\.]+/g, '').replace(/(\..*)\./g, '$1');  
        });

        var i=0; 
        var abc = $('.toClone');

        $('#dynamic_field').on('click', '.btn_add', function(){
            $(this).closest('.toClone').after($('.toClone:last').clone().find("input[type='text']").val("").end());
            setSerialNumber();
        }); 

        $('#dynamic_field').on('click', '.btn_remove', function(){
            var rows = $('.toClone');
            if (rows.length > 1) {
                $(this).closest('.toClone').remove();
                setSerialNumber();
            } else {
                // clear the data in the last row
                $(this).closest('.toClone').find("input[type='text']").val("");
            }
        }); 

        function setSerialNumber() {
            $i = 1;

            $('.tdSl').each(function (index, element) {
                $(element).html($i);
                $i++;
            });
        }


        $('form').submit(function( event ) {
            event.preventDefault();
            $.ajax({
                type: 'post',
                url: "{{ url('mfn/addOtsEmployeeIncentiveConfigurationItem/') }}",
                data: $('form').serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.errors) {
                        
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href ="{{ url('mfn/otsEmployeeIncentiveConfiguration/') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                        }
                    }
                },
                error: function( _response ){
                    // Handle error
                    alert(_response.errors);
                }
            });
        });    

    });

    

</script>


@endsection