@extends('admin.layouts.main')

@section('title')
Company - Payroll
@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('company.directory') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a href="{{ route('admin.companies.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('company.company') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('candidate.detail') }}</a> </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.payroll_setup') }}</li>
                </ol>
            </nav>

            <div class="form-sec">

                @include('payroll::company_payroll.modules.store.common.form-step')

                @if(session('success'))
                <div class="alert alert-success" id="successAlert">
                    {{ session('success') }}
                </div>
                @endif

                @if(session('error'))
                <div class="alert alert-danger" id="errorAlert">
                    {{ session('error') }}
                </div>
                @endif

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <input type="hidden" name="company_id" value="{{ $id }}" />
                                @if (isset($company_payroll))
                                <input type="hidden" name="company_payroll_id" id="company_payroll_id" value="{{ $company_payroll->id }}" />
                                @endif
                                <div class="tab">
                                    <div class="btn-group-em float-right" role="group">
                                        <a href="javascript:void(0)" class="btn btn-sm step-btn-transparent d-flex align-items-center" data-toggle="modal" data-target="#add-new-benefits">{{ @trans('payroll.add_new') }}</a>
                                    </div>
                                    <h2 class="form-sec-title">{{ @trans('payroll.earnch_deductions') }}</h2>
                                    <div class="row mb-30">
                                        <div id="earning-lenght" class="col text-center"></div>
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable earning-lenght">
                                                    <table class="table" id="mtcTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.title') }}</th>
                                                                <th>{{ @trans('payroll.type') }}</th>
                                                                <th>{{ @trans('payroll.taxable') }}</th>
                                                                <th>{{ @trans('payroll.fixed_value') }}</th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="earning-deduction">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <form method="post" id="frmUpdateEarningDeductStatus" action="{{route('admin.payroll.store.payroll-status',['panel' => Session::get('panel'), 'id' => $id])}}">
                                        @csrf
                                        <div class="approver-length-validate">
                                            <input type="hidden" class="form-control" name="earning_length" id="earningDeductLength" value="" />
                                            <input type="hidden" class="form-control-invalid-text" name="payroll_step_status" id="payroll_step_status" value="4" />
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-btn">
                                    <div style="float: left;">
                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.companies.structure',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                    </div>
                                    <div style="float:right;">
                                        <button class="btn step-btn" id="earningDeductCmpltBtn">{{ @trans('project::project.save_next') }}</button>
                                        {{-- href="{{ route('admin.payroll.companies.leaves',['panel' => Session::get('panel'), 'id' => $id]) }}" --}}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
<!-- add-new-benefits popup -->
@include('payroll::company_payroll.modules.modals.store_earning_deduction')
@include('payroll::company_payroll.modules.modals.common_confirmation_modal')
@endsection

@push('pageJs')
<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.alphanum.min.js')}}"></script>
<script>
    /*Step Validation*/
    $('#frmUpdateEarningDeductStatus').validate({
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        ignore: [],
        rules: {
            earning_length: {
                required: true,
                min: 1,
                number: true
            },
        },
        messages: {
            earning_length: {
                required: 'Add atleast one record to proceed next step.',
                min: 'Add atleast one record to proceed next step.',
                number: 'Add atleast one record to proceed next step.',
            },
        },
        errorPlacement: function(error, element) {
            if (element.parent('.rating').length) {
                error.insertAfter(element.parents('.approver-length-validate'));
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).closest('.form-control').removeClass('is-valid').addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
        },
        success: function(element) {
            $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
        },
    });
    $(document).ready(function() {
        getEarningDeductionData()
    });

    $('#earningDeductCmpltBtn').on('click', function() {
        if ($('#frmUpdateEarningDeductStatus').valid()) {
            $(this).text('Please wait...');
            $(this).attr('disabled', 'disabled');
            $('#frmUpdateEarningDeductStatus').submit();
        }
    })

    function formatAmountType(val) {
        val.split('_').map(function(word) {
            return word.charAt(0).toUpperCase() + word.slice(1);
        }).join(' ');
    }

    var earningDeductionIndexUrl = '{{ route("admin.payroll.getEarningDeductionData", ["panel" => session("panel"), "id" => ":id"]) }}';
</script>
<script src="{{ asset('js/payroll-setup/earning_deduction.js')}}"></script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/admin/project/store.css') }}">
@endpush