@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">
                                @if($id)
                                <input type="hidden" name="company_id" id="company_id" value="{{ $id }}" />
                                @endif
                                <div class="tab">
                                    <!--Department Start--->
                                    <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="#modalAddDepartments">{{ @trans('payroll.add_department') }}</a>
                                    </div>
                                    <h2 class="form-sec-title">Department</h2>
                                    <div class="row mb-30">
                                        <div id="department-lenght" class="col text-center"></div>
                                        <div class="col-md-12 dept-list-length">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable department-lenght">
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.department') }}</th>
                                                                <th>{{ @trans('payroll.parent') }}</th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="department">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--Department End--->

                                    <!--Line of bussiness start---->
                                    <h2 class="form-sec-title">{{ @trans('payroll.line_of_business_title')}}</h2>
                                    <div class="row mb-30">
                                        <div class="col-md-12 lob-list-length">
                                            <label class="control-label">{{ @trans('payroll.line_of_business_sub_title')}}</label>
                                            <form method="post" id="frmBusinessAdd" autocomplete="off">
                                                @csrf
                                                @if($id)
                                                <input type="hidden" name="business_company_id" id="business_company_id" value="{{ $id }}" />

                                                @endif
                                                <div class="row d-flex">
                                                    <div class="col-md-6">
                                                        <div class="form-group select line-business-select">
                                                            <select class="form-control select-two-with-locked-options" id="business_id" name="business_id" data-placeholder="Select">
                                                                <option value="" hidden="">{{ @trans('payroll.business_select') }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <!-- <div class="col-md-2 pl-lg-0 mb-responsive"> -->

                                                        <button type="button" class="btn btn-em lineOfBusinessSubmit" id="lineOfBusinessSubmit" title="Add">{{ @trans('payroll.save') }}</button>
                                                        <!-- </div> -->
                                                    </div>
                                                    <span id="business-error" class="invalid-feedback"></span>
                                                </div>

                                            </form>

                                            <div class="selected-can-list chips payroll-chips">
                                                <ul class="mb-0" id="line-of-business">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!--Line of bussiness end---->

                                    <!--Barnches start--->
                                    <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-payroll-branch">{{ @trans('payroll.add_branch')}}</span></a>
                                    </div>
                                    <h2 class="form-sec-title">Branches</h2>
                                    <div class="row">
                                        <div id="branch-lenght" class="col text-center"></div>
                                        <div class="col-md-12 branch-list-length">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable branch-lenght">
                                                    <table class="table" id="mtcTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.branch_name') }}</th>
                                                                <th>{{ @trans('payroll.address') }}</th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="branch">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--Barnches end--->
                                </div>
                                <form method="post" id="frmupdateStructureStatus" action="{{route('admin.payroll.store.payroll-status',['panel' => Session::get('panel'), 'id' => $id])}}">
                                    @csrf
                                    <div class="lob-length">
                                        <input type="hidden" name="line_of_bussiness_length" id="lineOfBusinessLength" value="" />
                                    </div>
                                    <div class="dept-length">
                                        <input type="hidden" name="dept_length" id="departmentLength" value="" />
                                    </div>
                                    <div class="branch-length">
                                        <input type="hidden" name="branch_length" id="branchLength" value="" />
                                    </div>
                                    <input type="hidden" class="form-control-invalid-text" name="payroll_step_status" id="payroll_step_status" value="3" />
                                </form>

                                <div class="tab-btn">
                                    <div style="float: left;">
                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.companies.team',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                    </div>
                                    <div style="float:right;">
                                        <button class="btn step-btn" id="structureCmpltBtn">{{ @trans('project::project.save_next') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

<!-- add-payroll-department popup -->
@include(' payroll::company_payroll.modules.modals.store_branches') <!-- add-payroll-branch popup -->
@include('payroll::company_payroll.modules.modals.store_departments')
@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>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: true,
            maxDecimalPlaces: 2,
            allowThouSep: false
        });
        $('#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
        });
        var myForm = $('#frmStructureAdd');
        $.data(myForm[0], 'validator').settings.ignore = "null";

        /*Step validation*/
        $('#frmupdateStructureStatus').validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            ignore: [],
            rules: {
                dept_length: {
                    required: true,
                    min: 1,
                    number: true
                },
                line_of_bussiness_length: {
                    required: true,
                    min: 1,
                    number: true
                },
                branch_length: {
                    required: true,
                    min: 1,
                    number: true
                },
            },
            messages: {
                dept_length: {
                    required: 'Department is required',
                    min: 'Department is required',
                    number: 'Department is required',
                },
                line_of_bussiness_length: {
                    required: 'Line of Business is required',
                    min: 'Line of Business is required',
                    number: 'Line of Business is required',
                },
                branch_length: {
                    required: 'Branch is required',
                    min: 'Branch is required',
                    number: 'Branch is required',
                },
            },
            errorPlacement: function(error, element) {
                if (element.parent('.dept-length').length) {
                    error.insertAfter('.dept-list-length');
                } else if (element.parent('.branch-length').length) {
                    error.insertAfter('.branch-list-length');
                } else if (element.parent('.lob-length').length) {
                    error.insertAfter('.lob-list-length');
                }
            },
            highlight: function(element) {
                if ($(element).attr('id') == 'lineOfBusinessLength') {
                    $('#lineOfBusinessLength-error').remove();
                } else if ($(element).attr('id') == 'departmentLength') {
                    $('#departmentLength-error').remove();
                } else if ($(element).attr('id') == 'branchLength') {
                    $('#branchLength-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');
            },
        });

        lineOfBusinessGet()
        getDepartmentData()
        getBranchData()

        /*Store line of business*/

        $('#lineOfBusinessSubmit').on('click', function() {

            var business_company_id = $('#business_company_id').val();
            var business_id = $('#business_id').val();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            if (business_id != '') {

                $('#lineOfBusinessSubmit').text('Please wait...');
                $('#lineOfBusinessSubmit').attr('disabled', 'disabled');
                $('#business-error').empty();
                $.ajax({
                    url: '{{ route("admin.payroll.lineOfBusines", ["panel" => session("panel")]) }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: {
                        'business_company_id': business_company_id,
                        'business_id': business_id
                    },

                    success: function(response) {
                        // Handle the response from the server
                        $("#business_id").val('').trigger('change');
                        lineOfBusinessGet();
                        $('#lineOfBusinessSubmit').text('Save');
                        $('#lineOfBusinessSubmit').removeAttr('disabled');
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                    }
                });
            } else {
                $('#business-error').empty();
                $("#business-error").append('Please select line of business')
                $('#lineOfBusinessSubmit').val('Save');
                $('#lineOfBusinessSubmit').removeAttr('disabled');
            }
        });

        getIndustryList()

        $('#structureCmpltBtn').on('click', function() {

            if ($('#frmupdateStructureStatus').valid()) {
                $(this).text('Please wait...');
                $(this).attr('disabled', 'disabled');
                $('#frmupdateStructureStatus').submit();
            }
        })

        function getIndustryList() {
            var getSearchJsonIndexUrl = window["getSearchJsonIndexUrl"];
            $("#business_id").select2({
                placeholder: "Select an option",
                ajax: {
                    delay: 250,
                    url: getSearchJsonIndexUrl,
                    dataType: "json",
                    data: function(params) {
                        var query = {
                            search: params.term,
                            companyIndustry: $("#frmBusinessAdd #business_id").val(),
                            type: "companyIndustry",
                            ids: lineOfBusinessIds,
                        };
                        return query;
                    },
                    processResults: function(response) {
                        return {
                            results: response,
                        };
                    },
                },
            });
        }
    });


    $(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();
        })
    });
    var getBranchDataIndexUrl = '{{ route("admin.payroll.getBranchData", ["panel" => session("panel"), "id" => ":id"]) }}';
    var getDepartmentDataIndexUrl = '{{ route("admin.payroll.getDepartmentData", ["panel" => session("panel"), "id" => ":id"]) }}';
    var lineOfBusinessGetDataIndexUrl = '{{ route("admin.payroll.lineOfBusinessGetData", ["panel" => session("panel"), "id" => ":id"]) }}';
    var getSearchJsonIndexUrl = '{{route("common.get_search_json")}}';
</script>
<script src="{{ asset('js/payroll-setup/structure.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