@extends('layouts/acc_layout')
@section('title', '| Vehicle Allowance Configuration')
@section('content')
@include('successMsg')

<style>

    .select2-container--default .select2-selection--single {
        border-radius: 0; 
        border: 1px solid #ccc; 
        height: 31px;
    }

</style>



<div class="row add-data-form"  style="padding-bottom: 1%">
    <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('vehicleAllowanceConfigList/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>View Vehicle Allowance Configuration List</a>
                </div>
        		<div class="panel panel-default panel-border">
                        <div class="panel-heading">
                            <div class="panel-title">Add Vehicle Allowance Configuration</div>
                        </div>
                	<div class="panel-body">
                		<div class="row">
                			<div class="col-md-12">

                                {!! Form::open(['role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'form']) !!}

                                    <div class="form-group">
                                        {!! Form::label('companyId', 'Company:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            @php
                                                $companyIds = DB::table('gnr_company')->select('id','name')->get();
                                            @endphp
                                            <select class="form-control" id="companyId" name="companyId" >
                                                <option value="">Select Company</option>
                                                @foreach($companyIds as $companyId)
                                                    <option value="{{$companyId->id}}">{{$companyId->name}}</option>
                                                @endforeach
                                            </select>                          
                                        </div>
                                    </div>
            
                                    <div class="form-group">
                                        {!! Form::label('projectId', 'Project:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            <select class="form-control" id="projectId" name="projectId" >
                                                <option value="">Select Project</option>
                                            </select>                          
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        {!! Form::label('projectTypeId', 'Project Type:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            <select class="form-control" id="projectTypeId" name="projectTypeId" >
                                                <option value="">Select Project Type</option>
                                            </select>                  
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('designationId', 'Designation:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            @php
                                                $designations = DB::table('hr_settings_position')->select('id','name')->where('status', 1)->get()->sortBy('name');
                                            @endphp
                                            <select class="form-control select2" id="designationId" name="designationId" >
                                                <option value="">Select Designation</option>
                                                @foreach($designations as $designation)
                                                    <option value="{{$designation->id}}">{{$designation->name}}</option>
                                                @endforeach
                                            </select>                          
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('effectiveDate', 'Effective Date:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                        {!! Form::text('effectiveDate', null, ['class' => 'form-control', 'style'=>'cursor:pointer', 'placeholder' => 'dd-mm-yyyy', 'id' => 'effectiveDate'])!!}
                                        </div>
                                    </div>

                                    <br>

                                    <h4 align="left">
                                        <div class="title">Monthly Allowances:</div>
                                    </h4>

                                    <div class="form-group">
                                        {!! Form::label('allowanceMethod', 'Allowance Method:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::select('allowanceMethod', ['' => 'Select Allowance Method', 'MeterReadingWise' => 'Meter Reading Wise', 'Fixed' => 'Fixed'], null, ['class' => 'form-control', 'id' => 'allowanceMethod']) !!}
                                        </div>
                                    </div>
                                    
                                    <div class="form-group" id="meterReadingTypeField" style="display: none;">
                                        {!! Form::label('meterReadingType', 'Meter Reading Type:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::select('meterReadingType', ['' => 'Select Meter Reading Type', 'Fixed' => 'Fixed', 'Unlimited' => 'Unlimited'], null, ['class' => 'form-control', 'id' => 'meterReadingType']) !!}
                                        </div>
                                    </div>

                                    <div class="form-group" id="maxDistanceLimitField" style="display: none;">
                                        {!! Form::label('maxDistanceLimit', 'Maximum Distance Limit (KM):', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::text('maxDistanceLimit', $value = null, ['class' => 'form-control', 'id' => 'maxDistanceLimit', 'type' => 'text', 'placeholder' => 'Enter Maximum Distance Limit (KM)', 'autocomplete'=>'off']) !!}  
                                        </div>
                                    </div>

                                    <div class="form-group" id="fuelCostPerKilometerField" style="display: none;">
                                        {!! Form::label('fuelCostPerKilometer', 'Fuel Cost Per Kilometer:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::text('fuelCostPerKilometer', $value = null, ['class' => 'form-control', 'id' => 'fuelCostPerKilometer', 'type' => 'text', 'placeholder' => 'Enter Fuel Cost Per Kilometer (TK)', 'autocomplete'=>'off']) !!}  
                                        </div>
                                    </div>
                                    
                                    <div class="form-group" id="fixedFuelCostField" style="display: none;">
                                        {!! Form::label('fixedFuelCost', 'Fuel Cost:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::text('fixedFuelCost', $value = null, ['class' => 'form-control', 'id' => 'fixedFuelCost', 'type' => 'text', 'placeholder' => 'Enter Fuel Cost (TK)', 'autocomplete'=>'off']) !!}  
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('mobilCost', 'Mobil Cost:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::text('mobilCost', $value = null, ['class' => 'form-control', 'id' => 'mobilCost', 'type' => 'text', 'placeholder' => 'Enter Mobil Cost (TK)', 'autocomplete'=>'off']) !!}  
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('servicingCost', 'Service Cost:', ['class' => 'col-sm-4 control-label']) !!}
                                        <div class="col-sm-5">
                                            {!! Form::text('servicingCost', $value = null, ['class' => 'form-control', 'id' => 'servicingCost', 'type' => 'text', 'placeholder' => 'Enter Servicing Cost (TK)', 'autocomplete'=>'off']) !!}  
                                        </div>
                                    </div>

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

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

                    		</div>
                    	</div>
                  	</div>
             </div>
             <div class="footerTitle" style="border-top:1px solid white"></div>
    	</div>
    		<div class="col-md-2"></div>
    </div>
</div>




<script type="text/javascript">

    var allowanceMethodSelect = document.getElementById('allowanceMethod');
    var meterReadingTypeSelect = document.getElementById('meterReadingType');

    var meterReadingTypeField = document.getElementById('meterReadingTypeField');
    var maxDistanceLimitField = document.getElementById('maxDistanceLimitField');
    var fuelCostPerKilometerField = document.getElementById('fuelCostPerKilometerField');
    var fixedFuelCostField = document.getElementById('fixedFuelCostField');

    allowanceMethodSelect.addEventListener('change', function() {
        if (allowanceMethodSelect.value === 'MeterReadingWise') {
            meterReadingTypeField.style.display = 'block';
            fuelCostPerKilometerField.style.display = 'block';
            fixedFuelCostField.style.display = 'none';
            meterReadingTypeField.disabled = false;
            fuelCostPerKilometerField.disabled = false;
            fixedFuelCostField.disabled = true;
        } else if (allowanceMethodSelect.value === 'Fixed') {
            fixedFuelCostField.style.display = 'block';
            meterReadingTypeField.style.display = 'none';
            fuelCostPerKilometerField.style.display = 'none';
            fixedFuelCostField.disabled = false;
            meterReadingTypeField.disabled = true;
            fuelCostPerKilometerField.disabled = true;
        } else {
            meterReadingTypeField.style.display = 'none';
            maxDistanceLimitField.style.display = 'none';
            fuelCostPerKilometerField.style.display = 'none';
            fixedFuelCostField.style.display = 'none';
            meterReadingTypeField.disabled = true;
            maxDistanceLimitField.disabled = true;
            fuelCostPerKilometerField.disabled = true;
            fixedFuelCostField.disabled = true;
        }
    });

    meterReadingTypeSelect.addEventListener('change', function() {
        if (meterReadingTypeSelect.value === 'Unlimited') {
            fuelCostPerKilometerField.style.display = 'block';
            maxDistanceLimitField.style.display = 'none';
            fuelCostPerKilometerField.disabled = false;
            maxDistanceLimitField.disabled = true;
        } else if (meterReadingTypeSelect.value === 'Fixed') {
            maxDistanceLimitField.style.display = 'block';
            fuelCostPerKilometerField.style.display = 'block';
            maxDistanceLimitField.disabled = false;
            fuelCostPerKilometerField.disabled = false;
        } else {
            fuelCostPerKilometerField.style.display = 'none';
            maxDistanceLimitField.style.display = 'none';
            //fixedFuelCostField.style.display = 'none';
            fuelCostPerKilometerField.disabled = true;
            maxDistanceLimitField.disabled = true;
            //fixedFuelCostField.disabled = true;
        }
    });

    $(document).ready(function(){

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

           
        $('#maxDistanceLimit, #fuelCostPerKilometer, #fixedFuelCost,  #mobilCost, #servicingCost').on('input', function(event) {
            this.value = this.value.replace(/[^0-9\\.]+/g, '').replace(/(\..*)\./g, '$1'); 
        });
        

        $('#companyId').change(function(e) {
            e.preventDefault();
            
            // Unselect projectTypeId and branchId
            $('#projectTypeId').val('');
            $('#branchId').val('');
            
            $('#projectId option:gt(0)').remove();
            $.ajax({
                type: "post",
                url: "{{ url('getProjectByCompany') }}",
                data: {
                    'companyId': $("#companyId").val(),
                },
                dataType: "json",
                success: function(projectTypes) {
                    $.each(projectTypes, function(index, value) {
                        $('#projectId').append("<option value=" + index + ">" + value + "</option>");
                    });
                }
            });
        });

        $('#projectId').change(function(e) {
            e.preventDefault();
            
            // Unselect projectTypeId
            $('#projectTypeId').val('');
            
            $('#projectTypeId option:gt(0)').remove();
            $.ajax({
                type: "post",
                url: "{{ url('gnr/getProjectTypes') }}",
                data: {
                    'projectId': $("#projectId").val(),
                },
                dataType: "json",
                success: function(projectTypes) {
                    $.each(projectTypes, function(index, value) {
                        $('#projectTypeId').append("<option value=" + index + ">" + value + "</option>");
                    });
                }
            });
        });


    
        $('#form').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type: 'post',
                url: "{{ url('addOrEditVehicleAllowanceConfigItem/') }}",
                data: $('#form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    if (_response.errors) {
                       
                    } else {
                        if(_response.responseTitle == "Warning!"){
                            toastr.warning(_response.responseText, _response.responseTitle, opts);
        
                        }else{
                            toastr.success(_response.responseText, _response.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ url('vehicleAllowanceConfigList/') }}";
                            }, 2000);

                        }
                    }
                },
                error: function(_response) {
                    // Handle error
                    alert(_response.errors);
                }
            });
        });
        

    });

</script> 
 

@endsection