@extends('hr_main')
@section('title', '| '. $data['pageTitle'] )
@section('stylesheets')
    <style>
        .panel .panel-body {
            color: #2c2e2f;
        }
        .table-custom {
            table-layout: fixed;
            width: 100% !important;
            border-collapse: collapse !important;
            border: 1px solid transparent !important;
        }
        .table-custom  th,td {
            /* border: 1px solid #c6c7cc; */
            /* padding: 10px 15px; */
        }
        .table-custom td {
            padding-right: 15px;
            min-height: 50px;
        }
        .table-custom th {
            font-weight: bold;
            text-align: center;
            padding: 10px 15px;
        }
        label {
            font-weight: 700;
        }
    </style>
@endsection
@section('content')
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a  href="{!! $data['indexUrl'] !!}" 
                    class="btn btn-info pull-right addViewBtn">
                    <i class="glyphicon glyphicon-th-list viewIcon">
                    </i>{!! $data['indexLabel'] !!}
                </a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel-heading">
                                <div class="panel-title">{!! $data['pageTitle'] !!}</div>
                            </div>
                            <div class="panel-body">
                                {!! Form::open([ 'url' => route('salaryDeduction.store'), 'method'=>'POST']) !!}
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('company_id')) has-error @endif">
                                                {!! Form::label('company_id', 'Company', ['class' => '']) !!}
                                                {!! Form::select('company_id', $data['companies'], null, ['class' => 'form-control getProject','autocomplete'=>'off']) !!}
                                                @if ($errors->has('company_id'))
                                                    <strong class="has-error">{{ $errors->first('company_id') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('project_id')) has-error @endif">
                                                {!! Form::label('project_id', 'Project', ['class' => '']) !!}
                                                {!! Form::select('project_id', [], null, ['class' => 'form-control getBranch','autocomplete'=>'off']) !!}
                                                @if ($errors->has('project_id'))
                                                    <strong class="has-error">{{ $errors->first('project_id') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('branch_id')) has-error @endif">
                                                {!! Form::label('branch_id', 'Branch', ['class' => '']) !!}
                                                {!! Form::select('branch_id', [], null, ['class' => 'form-control getEmployee','autocomplete'=>'off']) !!}
                                                @if ($errors->has('branch_id'))
                                                    <strong class="has-error">{{ $errors->first('branch_id') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('branch_id')) has-error @endif">
                                                {!! Form::label('employee_id', 'Employee', ['class' => '']) !!}
                                                {!! Form::select('employee_id', [], null, ['class' => 'form-control','autocomplete'=>'off']) !!}
                                                @if ($errors->has('employee_id'))
                                                    <strong class="has-error">{{ $errors->first('employee_id') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('total_amount')) has-error @endif">
                                                {!! Form::label('total_amount', 'Amount', ['class' => '']) !!}
                                                {!! Form::text('total_amount', null, ['class' => 'form-control','autocomplete'=>'off']) !!}
                                                @if ($errors->has('total_amount'))
                                                    <strong class="has-error">{{ $errors->first('total_amount') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('installment_no')) has-error @endif">
                                                {!! Form::label('installment_no', 'Installment No', ['class' => '']) !!}
                                                {!! Form::text('installment_no', null, ['class' => 'form-control','autocomplete'=>'off']) !!}
                                                @if ($errors->has('installment_no'))
                                                    <strong class="has-error">{{ $errors->first('installment_no') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                         <div class="col-md-4">
                                            <div class="form-group @if($errors->has('installment_amount')) has-error @endif">
                                                {!! Form::label('installment_amount', 'Installment Amount', ['class' => '']) !!}
                                                {!! Form::text('installment_amount', null, ['class' => 'form-control','autocomplete'=>'off','disabled']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('reference_no')) has-error @endif">
                                                {!! Form::label('reference_no', 'Reference No', ['class' => '']) !!}
                                                {!! Form::text('reference_no', null, ['class' => 'form-control','autocomplete'=>'off']) !!}
                                                @if ($errors->has('reference_no'))
                                                    <strong class="has-error">{{ $errors->first('reference_no') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                             <div class="form-group @if($errors->has('reference_issue_date')) has-error @endif">
                                                {!! Form::label('reference_issue_date', 'Refference Issue Date', ['class' => '']) !!}
                                                {!! Form::text('reference_issue_date', null, ['class' => 'form-control datepicker','autocomplete'=>'off']) !!}
                                                @if ($errors->has('reference_issue_date'))
                                                    <strong class="has-error">{{ $errors->first('reference_issue_date') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                             <div class="form-group @if($errors->has('generate_date')) has-error @endif">
                                                {!! Form::label('generate_date', 'Generate Date', ['class' => '']) !!}
                                                {!! Form::text('generate_date', null, ['class' => 'form-control datepicker','autocomplete'=>'off']) !!}
                                                @if ($errors->has('generate_date'))
                                                    <strong class="has-error">{{ $errors->first('generate_date') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                             <div class="form-group @if($errors->has('effect_month_date')) has-error @endif">
                                                {!! Form::label('effect_month_date', 'Effect Month', ['class' => '']) !!}
                                                {!! Form::text('effect_month_date', null, ['class' => 'form-control datepicker','autocomplete'=>'off']) !!}
                                                @if ($errors->has('effect_month_date'))
                                                    <strong class="has-error">{{ $errors->first('effect_month_date') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group @if($errors->has('reason')) has-error @endif">
                                                {!! Form::label('Reason', 'Reason', ['class' => '']) !!}
                                                {!! Form::textarea('reason', null, ['class' => 'form-control','autocomplete'=>'off','rows'=>'1']) !!}
                                                @if ($errors->has('reason'))
                                                    <strong class="has-error">{{ $errors->first('reason') }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                            
                                    <div class="row" style="margin-top: 20px;">
                                        <div class="col-md-1 pull-right">
                                            <div class="form-group">
                                                {!! Form::button("Save", ['type'=>'submit','name'=>'filter_form','class' => 'form-control btn btn-info','autocomplete'=>'off']) !!}
                                            </div>
                                        </div>
                                    </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
@endsection

@section('footerAssets')
    <script type="text/javascript">

        $("#effect_month_date").datepicker( {
			format: "mm-yyyy",
			viewMode: "months", 
			minViewMode: "months"
		});
        
        function getDependentDropdown(sourceAttr,targetAttr,link,selected=null){
            var sourceId=0;
            if(sourceAttr.jquery)
                sourceId = sourceAttr.val();
            else
                sourceId = sourceAttr;
            return $.ajax({
                url: link,
                dataType: 'json',
                type: 'POST',
                data: {"sourceId":sourceId,"_token":$('meta[name="_token"]').attr('content')},
                success: function( data, textStatus, jQxhr ){
                    var options='<option value="">Select One</option>';
                    $.each(data,function(key,val){
                        var selectedData='';
                        if(selected!=null && val.id==selected){
                            selectedData = 'selected="selected"';
                        }
                        
                        options += '<option '+selectedData+' value="'+val.id+'">'+val.name+'</option>';
                    });
                    targetAttr.html(options);
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
            });
        }

        $(document).on('change','.getProject',function(){
            getDependentDropdown(
                $('.getProject'),
                $('select[name="project_id"]'),
                "{{ url('hr/structure/getProject') }}"
            );
        });

        $(document).on('change','.getBranch',function(){
            getDependentDropdown(
                $('.getBranch'),
                $('select[name="branch_id"]'),
                "{{ url('hr/structure/getBranchFromProject') }}"
            );
        });

        
        // GetEmployee
        $(document).on('change','.getEmployee', function() {
            var companyElement   = $('select[name="company_id"]');
            var projectElement   = $('select[name="project_id"]');
            var branchElement    = $('select[name="branch_id"]');

            var url              = "{{ url('hr/commonAjaxRequest') }}"+"/"+companyElement.val()+"/"+projectElement.val()+"/"+branchElement.val();
            var srcElement       = $( '.getEmployee' );
            var targetElement    = $( 'select[name="employee_id"]' );

            getDependentDropdown( srcElement, targetElement, url );
        });

        $( "#total_amount" ).on('input',function() {
            $( "#installment_amount" ).val( calculateInstallmentAmount() );
        });
        
        $( "#installment_no" ).on('input',function() {
            $( "#installment_amount" ).val( calculateInstallmentAmount() );
        });

        function calculateInstallmentAmount() {
            var amount = 0.00;
            var totalAmount = $( "#total_amount" ).val() || 0.00;
            var installmentNo = $( "#installment_no" ).val() || 1;
            amount = totalAmount / installmentNo;
            return amount.toFixed(2);
        }

        $(document).ready(function(){
            getDependentDropdown(
                {{ $data['selectedCompanyId'] ?? 0 }},
                $("select[name='project_id']"),
                "{{ url('hr/structure/getProject') }}",
                {{ $data['selectedProjectId'] ?? 0 }}
            );
            getDependentDropdown(
                {{ $data['selectedProjectId'] ?? 0 }},
                $("select[name='branch_id']"),
                "{{ url('hr/structure/getBranchFromProject') }}",
                {{ $data['selectedBranchId'] ?? 0 }}
            );

        })
    </script>
@endsection