@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')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <form method="post" id="frmLeavesAdd" autocomplete="off">
                                    @csrf
                                    @if($id)
                                    <input type="hidden" name="company_id" value="{{ $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 pt-1" data-target="#add-leave-allocation-quota-type" data-toggle="modal" style="border: none;
                                            background: transparent;
                                            color: #4e5867;
                                            padding: 0px 5px 0px 0px;
                                            padding-top: 0px;"><i class="material-icons" style="font-size: 22px; padding-top:0px;">settings</i></a>
                                            <a href="javascript:void(0)" class="btn btn-sm step-btn-transparent pt-1" data-target="#add-leave-type" data-toggle="modal">Add Leave Type</a>
                                        </div>
                                        <h2 class="form-sec-title">{{ @trans('payroll.payroll_leaves') }}</h2>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="table-data leave-length-list">
                                                    <div class="table-responsive table-checkable">
                                                        <div class="no-record-leave text-center" style="margin-bottom:  1 !important;margin-bottom: 10px;"></div>
                                                        <table class="table leave-table" id="mtcTable">
                                                            <thead>
                                                                <tr>
                                                                    <th>
                                                                        #
                                                                    </th>
                                                                    <th>{{ trans('payroll.leave_type') }}</th>
                                                                    <th>{{ trans('payroll.leave_quota') }}</th>
                                                                    <th>{{ trans('payroll.carryover') }}</th>
                                                                    <th>Action</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="allocate-leave-quota">
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="tab-btn">
                                    <div style="float: left;">
                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.companies.earning_deductions',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                    </div>
                                    <div style="float:right;">
                                        <form action="{{route('admin.payroll.updatePayrollStatus', ['panel' => Session::get('panel')])}}" id="frmSubmitEnablePayroll" autocomplete="off" method="POST">
                                            @csrf
                                            <div class="approver-length-validate">
                                                <input type="hidden" name="companyId" value="{{ $id }}" />
                                                <input type="hidden" name="leave_length" id="leaveLength" />
                                            </div>
                                        </form>
                                        <button type="submit" class="btn step-btn submitPayrollButton" id="submitPayrollButton">{{ @trans('payroll.finish') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Add Leave Type start -->
@include('payroll::company_payroll.modules.modals.store_leaves_quota')
@include('payroll::company_payroll.modules.modals.common_confirmation_modal')
@include('payroll::company_payroll.modules.modals.store_leave_allocation_quota')
@endsection

@push('pageJs')
<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.alphanum.min.js')}}"></script>
{!! JsValidator::formRequest('Modules\Payroll\Http\Requests\StorePayrollSetupRequest', '#frmPayrollAdd') !!}
<script>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 2,
            allowThouSep: false,
            min: 1,
        });
        $('#project_importance').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 10
        });
        $('#actualization').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 100
        });


    });
    $(document).ready(function() {
        var today = new Date();
        var $date = $('.dateselect').datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $('#date').change(function() {
            $(this).valid();
        })
    });
    $(document).ready(function() {
        var today = new Date();
        var $date = $('.salary_payment_schedule').datepicker({
            autoHide: true,
            format: 'dd',
            zIndex: 2048,
            endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $('#date').change(function() {
            $(this).valid();
        })
    });
    $(document).ready(function() {
        getLeaveData();

        /*Step validation*/
        $('#frmSubmitEnablePayroll').validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            ignore: [],
            rules: {
                leave_length: {
                    required: true,
                    min: 1,
                    number: true
                },
            },
            messages: {
                leave_length: {
                    required: 'Leave is required',
                    min: 'Leave is required',
                    number: 'Leave is required',
                },
            },
            errorPlacement: function(error, element) {
                if (element.parent('.approver-length-validate').length) {
                    error.insertAfter('.leave-length-list');
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element) {
                $('#leaveLength-error').remove();
                $(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).on('click', '#submitPayrollButton', function() {
            if ($('#frmSubmitEnablePayroll').valid()) {
                $('.submitPayrollSetupBtn').text('Please wait...');
                $('.submitPayrollSetupBtn').attr('disabled', 'disabled');
                $('#frmSubmitEnablePayroll').submit();
            }
        });
    });
    var payrollLeaveIndexUrl = "{{ route('admin.payroll.companyLeaveList', ['panel' => session('panel'), 'id' => ':id']) }}";
</script>
<script src="{{ asset('js/payroll-setup/leave.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