@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">
                                <div class="tab">
                                    <input type="hidden" name="client_contact" id="client_contact" value="true" />
                                    <input type="hidden" name="payroll_admin" id="payroll_admin" value="true" />
                                    <input type="hidden" name="payroll_approver" id="payroll_approver" value="true" />
                                    <input type="hidden" name="company_id" id="company_id" value="{{ $id }}" />
                                    <div v-if="$company_payroll != null">
                                        <input type="hidden" name="company_payroll_id" id="company_payroll_id" value="{{ $company_payroll->id }}" />
                                    </div>

                                    <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-client-contact-person">{{ @trans('payroll.add_new') }}</a>
                                    </div>
                                    <h2 class="form-sec-title">{{ @trans('payroll.client_contact') }}</h2>
                                    <div class="row mb-30">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable">
                                                    <div class="no-record-client-contact text-center"></div>
                                                    <table class="table client-contact-table" id="mtcTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.person') }} </th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="client-contact">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <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-admin">{{ @trans('payroll.add_new') }} </a>
                                    </div>
                                    <h2 class="form-sec-title">{{ @trans('payroll.payroll_admin') }}</h2>
                                    <div class="row mb-30">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable">
                                                    <div class="no-record-payroll-admin text-center"></div>
                                                    <table class="table payroll-admin-table" id="mtcTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.person') }}</th>
                                                                <th>{{ @trans('payroll.type') }}</th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="payroll-admin">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h2 class="form-sec-title">{{ @trans('payroll.payroll_approver') }} <span class="required">*</span></h2>
                                    <div class="row mb-30">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable">
                                                    <table class="table" id="mtcTable">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    {{ @trans('payroll.index') }}
                                                                </th>
                                                                <th>{{ @trans('payroll.person') }}</th>
                                                                <th>{{ @trans('payroll.type') }}</th>
                                                                <th>{{ @trans('payroll.action') }}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="payroll-approver">
                                                            <tr id="list-approver" class="add">
                                                                <td colspan="4" class="text-center pl-0">
                                                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#add-payroll-approver"><span class="material-icons mr-2">add</span>Add Approver</a>
                                                                </td>
                                                            </tr>
                                                        </tbody>

                                                        <tbody id="payroll-approver-append">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form method="post" id="updatePayrollStatus" 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="approver_length" id="approverLength" />
                                        <input type="hidden" name="payroll_step_status" id="payroll_step_status" value="2" />
                                    </div>
                                </form>
                                <div class="tab-btn">
                                    <div style="float: left;">
                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.companies.payrollSetup',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                    </div>
                                    <div style="float:right;">
                                        <button class="btn step-btn" id="payroll_team" type="btn">{{ @trans('project::project.save_next') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@include('payroll::company_payroll.modules.modals.team_client_contact')
@include('payroll::company_payroll.modules.modals.payroll_admin')
@include('payroll::company_payroll.modules.modals.team_payroll_approver')
@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/select2-tree.js') }}"></script>
<script>
    $(document).ready(function() {
        var CustomSelectionAdapter = $.fn.select2.amd.require(
            "select2/selection/customSelectionAdapter"
        );

        /*Step validation*/
        $('#updatePayrollStatus').validate({
            errorElement: 'span',
            errorClass: 'invalid-feedback',
            ignore: [],
            rules: {
                approver_length: {
                    required: true,
                    min: 1,
                    number: true
                },
            },
            messages: {
                approver_length: {
                    required: 'Payroll approver is required',
                    min: 'Payroll approver is required',
                    number: 'Payroll approver is required',
                },
            },
            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');
            },
        });

        $(".select-two-with-locked-options").each(function() {
            if (!$(this).hasClass("select-two-tree")) {
                let element = $(this);
                initSelect2WithLockedOptions(element);
            }
        });
        getClientContactData();
        getPayrollAdminData();
        getPayrollApproverData();

        /*Internal admin input value */
        $('.internal_frachise_contact').next().find('.select2-search__field').on('input', function() {
            var inputValue = $(this).val();
            clientContact(inputValue)
        });

        /*External admin input value*/
        $('.external_frachise_contact').next().find('.select2-search__field').on('input', function() {
            var inputValue = $(this).val();
            externalFrachiseContact(inputValue, 'admin')
        });

        /*Internal approvar input value*/
        $('.approver_internal_frachise_contact').next().find('.select2-search__field').on('input', function() {
            var inputValue = $(this).val();
            clientContact(inputValue)
        });

        /*External approvar input value*/
        $('.approver_external_frachise_contact').next().find('.select2-search__field').on('input', function() {
            var inputValue = $(this).val();
            externalFrachiseContact(inputValue, 'approvar')
        });

        /*Client contact list input value*/
        $('.frachise_contact').next().find('.select2-search__field').on('input', function(e) {
            var inputValue = e.target.value;
            externalFrachiseContact(inputValue, 'contact')
        });

        $('.approver_member_type').click(function(e) {
            const value = e.target.value
            // // Remove the last appended value

            $('#approver_member_type').val('');

            $('#approver_member_type').val($('#approver_member_type').val() + value);

            if (value == 'internal') {
                const data = $('#approver_external_frachise_contact').val()
                if (data.length > 0) {
                    $('#approver_external_frachise_contact').val('').trigger('change');
                }

                $('#approver-external-class').removeClass('d-block');
                $('#approver-external-class').addClass('d-none');
                $('#approver-internal-class').removeClass('d-none');
                $('#approver-internal-class').addClass('d-block');
            } else if (value == 'external') {

                $('#internal_frachise_contact').val('').trigger('change');

                $('#approver-internal-class').removeClass('d-block');
                $('#approver-internal-class').addClass('d-none');
                $('#approver-external-class').removeClass('d-none');
                $('#approver-external-class').addClass('d-block');
            }

        });

        /*Internal or external radio values toggle*/
        $('.member_type').click(function(e) {
            const value = e.target.value

            $('#member_type').val('');

            $('#member_type').val($('#member_type').val() + value);

            if (value == 'internal') {

                const data = $('#external_frachise_contact').val()
                if (data.length > 0) {
                    $('#external_frachise_contact').val('').trigger('change');
                }

                $('#external-class').removeClass('d-block');
                $('#external-class').addClass('d-none');
                $('#internal-class').removeClass('d-none');
                $('#internal-class').addClass('d-block');
            } else if (value == 'external') {

                $('#internal_frachise_contact').val('').trigger('change');

                $('#internal-class').removeClass('d-block');
                $('#internal-class').addClass('d-none');
                $('#external-class').removeClass('d-none');
                $('#external-class').addClass('d-block');
            }

        });

        function initSelect2WithLockedOptions(element) {
            // console.log(element);
            let elementClass = element.nextAll(".list-unstyled");
            let elementId = element.attr('id');
            if (elementId == 'approver_internal_frachise_contact' || elementId == 'approver_external_frachise_contact') {
                element
                    .select2({
                        selectionAdapter: CustomSelectionAdapter,
                        selectionContainer: elementClass,
                        maximumSelectionLength: 1,
                        templateSelection: function(tag, container) {
                            if (tag.element.dataset.locked) {
                                $(container).addClass("locked-tag");
                                tag.locked = true;
                            }
                            return tag.text;
                        },
                    })
                    .on("change.select2", function(e) {
                        if (element.val().length > 0) {
                            elementClass.show();
                        } else {
                            elementClass.attr("style", "display: none !important");
                        }
                    })
                    .on("select2:unselecting", function(e) {
                        if ($(e.params.args.data.element).data("locked")) {
                            e.preventDefault();
                        }
                    });
                element.trigger("change");
            } else {
                element
                    .select2({
                        selectionAdapter: CustomSelectionAdapter,
                        selectionContainer: elementClass,
                        templateSelection: function(tag, container) {
                            if (tag.element.dataset.locked) {
                                $(container).addClass("locked-tag");
                                tag.locked = true;
                            }
                            return tag.text;
                        },
                    })
                    .on("change.select2", function(e) {
                        if (element.val().length > 0) {
                            elementClass.show();
                        } else {
                            elementClass.attr("style", "display: none !important");
                        }
                    })
                    .on("select2:unselecting", function(e) {
                        if ($(e.params.args.data.element).data("locked")) {
                            e.preventDefault();
                        }
                    });
                element.trigger("change");
            }

        }

        function submitBtnEnable() {

            var client_contact = $('#client_contact').val();
            var payroll_admin = $('#payroll_admin').val();
            var payroll_approver = $('#payroll_approver').val();

        }

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

    });
    var payrollAdminIndexUrl = "{{ route('admin.payroll.getPayrollAdminData', ['panel' => session('panel'), 'id' => ':id']) }}";
    var payrollClientContactIndexUrl = "{{ route('admin.payroll.getClientContactData', ['panel' => session('panel'), 'id' => ':id']) }}";
    var payrollApproverIndexUrl = '{{ route("admin.payroll.getPayrollApproverData", ["panel" => session("panel"), "id" => ":id"]) }}';
    var externalContactIndexUrl = '{{ route("admin.payroll.clientAdminContactList", ["panel" => session("panel")]) }}';
    var internalUserIndexUrl = '{{ route("admin.payroll.clientContactList", ["panel" => session("panel")]) }}';
</script>
<script src="{{ asset('js/payroll-setup/team.js')}}"></script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/vendor/select2-tree.css') }}">
<style>
    .locked-tag .select2-selection__choice__remove {
        display: none !important;
    }
</style>
@endpush