@extends('admin.layouts.main')

@section('title')
Company Detail
@endsection

@section('content')

<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec detail-page">
            <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">{{ @trans('candidate.detail') }}</li>
                </ol>
            </nav>

            <div class="bg-white profile-header">
                <div class="profile-detail">
                    <div class="person-details">
                        <div class="about pl-0">
                            <h2 class="cndidate-name">{{$companyDetail->name}}</h2>
                            <div class="candidate-tags">
                                @if($companyDetail->is_supplier == 1)
                                <span class="badge badge-pill green">{{ @trans('company.supplier') }}</span>
                                @endif
                                @if($companyDetail->is_client == 1)
                                <span class="badge badge-pill green">{{ @trans('company.client') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="company_id" id="company_id" value="{{ $id }}" />
                    @if ($payrollSetup && $payrollSetup->id)
                    <input type="hidden" name="company_payroll_id" id="company_payroll_id" value="{{ $payrollSetup->id }}" />
                    @endif

                    <div class="d-flex text-right">
                        <div class="text-center mr-3">
                            <p class="mb-0">{{$companyDetail->contacts_count}}</p>
                            <p class="mb-0">{{ @trans('company.contacts') }}</p>
                        </div>
                        @if($companyDetail->payroll_status == null)
                        <a class="btn btn-em" data-target="#modalPayrollEnableConfirm" style="color: white;" data-toggle="modal" data-company-name="{{$companyDetail->name}}" @if ($companyDetail->payroll_status == 'draft' ? 'disabled' :'')
                            @endif>{{@trans('payroll.enable_payroll')}}</a>
                        @else
                        @if ($companyDetail->payroll_enable == true)


                        <div class="profile payroll-dropdown">
                            <div class="dropdown">
                                <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Payroll</button>
                                <div class="dropdown-menu">
                                    @if ($companyDetail->payroll_status == 'active')
                                    <a class="dropdown-item" href="{{route('admin.payroll.companies.payrollSetup',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}">{{@trans('payroll.edit_payroll')}}</a>
                                    @endif
                                    @if ($companyDetail->payroll_status == 'draft' && $companyDetail->payroll_step_status == '1')
                                    <a class="dropdown-item" href="{{route('admin.payroll.companies.team',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}">{{@trans('payroll.edit_payroll')}}</a>
                                    @elseif ($companyDetail->payroll_status == 'draft' && $companyDetail->payroll_step_status == '2')
                                    <a class="dropdown-item" href="{{route('admin.payroll.companies.structure',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}">{{@trans('payroll.edit_payroll')}}</a>
                                    @elseif ($companyDetail->payroll_status == 'draft' && $companyDetail->payroll_step_status == '3')
                                    <a class="dropdown-item" href="{{route('admin.payroll.companies.earning_deductions',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}">{{@trans('payroll.edit_payroll')}}</a>
                                    @elseif ($companyDetail->payroll_status == 'draft' && $companyDetail->payroll_step_status == '4')
                                    <a class="dropdown-item" href="{{route('admin.payroll.companies.leaves',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}">{{@trans('payroll.edit_payroll')}}</a>
                                    @elseif ($companyDetail->payroll_status == 'active')
                                    <a class="dropdown-item" style="color: white;" data-target="#modalPayrollDisableConfirm" data-toggle="modal">{{@trans('payroll.disabled')}}</a>
                                    @elseif ($companyDetail->payroll_status == 'inactive')
                                    <a class="dropdown-item" style="color: white;" data-target="#modalPayrollEnableSecondTimeConfirm" data-toggle="modal">{{@trans('payroll.enable_payroll')}}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                        @endif
                    </div>

                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" id="detailTab" href="#detail">{{ @trans('company.details') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contactTab" href="#cnct">{{ @trans('company.contacts') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="docsTab" href="#docs">{{ @trans('company.documents') }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="bankTab" href="#bank">{{ @trans('company.banks') }}</a>
                    </li>
                    @if ($companyDetail->payroll_status == 'active')
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="employeeTab" href="#employees" data-current-url="{{ url()->current() }}" data-replace-url="{{route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id])}}">Employees</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="payrollProcessingTab" data-toggle="tab" href="#payroll">Payroll Processing</a>
                    </li>
                    @if(in_array(auth()->id(), $payrollApproverIds))
                    <li class="nav-item">
                        <a class="nav-link" id="payrollApprovalTab" data-toggle="tab" href="#payrollApprove">Payroll Approval</a>
                    </li>
                    @endif
                    <li class="nav-item">
                        <a class="nav-link" id="payrollPayslipsTab" data-toggle="tab" href="#payslips">Payslips</a>
                    </li>
                    <input id="currentRoute" type="hidden" value="{{Route::currentRouteName()}}">
                    @endif
                </ul>
            </div>
            <div class="detail-content mt-4">
                <!-- Tab panes -->
                <div class="tab-content box">

                    <div id="detail" class="tab-pane fade">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="btn-group-em float-right mt-3" role="group">
                                    @permission('company-write')
                                    <a href="{{route('admin.companies.edit',['panel' => Session::get('panel'),'id' => $companyDetail->id])}}" class="btn btn-bordered btn-sm">Edit</a>
                                    @endpermission
                                </div>
                                <h3 class="detail-heading">{{ @trans('company.details') }}</h3>
                                <div class="info">

                                    @if(isset($companyDetail->logo_image))
                                    <div class="form-group">
                                        <label class="control-label">Logo</label>
                                        <img width="100" height="100" class="preview" src="{{ config('custom.download.url') }}{{ config('custom.upload.company.logo_path') }}/{{ $companyDetail->logo_image }}">
                                    </div>
                                    @endif

                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.company_type') }}</label>
                                        @if($companyDetail->is_supplier == 1 && $companyDetail->is_client == 1)
                                        <p class="display-info">Supplier ,Client</p>
                                        @elseif($companyDetail->is_supplier == 1 && $companyDetail->is_client == 0)
                                        <p class="display-info">{{ @trans('company.supplier') }}</p>
                                        @else
                                        <p class="display-info">{{ @trans('company.client') }}</p>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.address_line') }} 1</label>
                                        <p class="display-info">{{$companyDetail->address1}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.address_line') }} 2</label>
                                        <p class="display-info">{{$companyDetail->address2}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.country') }}</label>
                                        <p class="display-info">{{$companyDetail->countries->name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.state') }}</label>
                                        <p class="display-info">{{$companyDetail->states->name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.city') }}</label>
                                        <p class="display-info">{{$companyDetail->cities->name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.zip_code') }}</label>
                                        <p class="display-info">{{$companyDetail->zip_code}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.phone') }} #1</label>
                                        <p class="display-info">{{$companyDetail->mobile ?? '-'}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.phone') }} #2</label>
                                        @if(!empty($companyDetail->mobile2))
                                        <p class="display-info">{{$companyDetail->mobile2}}</p>
                                        @else
                                        <p class="display-info">-</p>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.phone') }} #3</label>
                                        @if(!empty($companyDetail->mobile3))
                                        <p class="display-info">{{$companyDetail->mobile3}}</p>
                                        @else
                                        <p class="display-info">-</p>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.email') }} #1</label>
                                        <p class="display-info">{{$companyDetail->email ?? '-'}}</p>

                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.email') }} #2</label>
                                        @if(!empty($companyDetail->email2))
                                        <p class="display-info">{{$companyDetail->email2}}</p>
                                        @else
                                        <p class="display-info">-</p>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.email') }} #3</label>
                                        @if(!empty($companyDetail->email3))
                                        <p class="display-info">{{$companyDetail->email3}}</p>
                                        @else
                                        <p class="display-info">-</p>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('company.website') }}</label>
                                        @if(!empty($companyDetail->website))
                                        <p class="display-info">{{$companyDetail->website}}</p>
                                        @else
                                        <p class="display-info">-</p>
                                        @endif
                                    </div>
                                </div>
                                @if(!empty($companyDetail->description))
                                <div class="form-group">
                                    <label class="control-label">{{ @trans('company.description') }}</label>
                                    <p class="display-info">{{$companyDetail->description}}</p>
                                </div>
                                @endif

                                @if(count($companyDetail->registrations) > 0)
                                <h3 class="detail-heading">{{ @trans('company.registration_details') }}</h3>
                                <div class="info">
                                    @foreach($companyDetail->registrations as $key => $registration)
                                    <div class="form-group">
                                        <label class="control-label">{{$registration->registration_title}} Number</label>
                                        <p class="display-info">{{$registration->registration_value}}</p>
                                    </div>
                                    @endforeach
                                    <div class="form-group">
                                        <label class="control-label">{{ trans('payroll.default_currency') }}</label>
                                        <p class="display-info">{{$companyDetail->countries->currency_code}}</p>
                                    </div>
                                </div>
                                @endif

                                @if ($companyDetail->payroll_status != null && $companyDetail->payroll_status != 'inactive')

                                @if(isset($payrollSetup) != null)
                                <!-- company pauyroll steup -->
                                <div class="btn-group-em float-right mt-3" role="group">
                                    <a class="btn btn-bordered btn-sm" href="{{route('admin.payroll.companies.payrollSetup',['panel' => Session::get('panel'),'id' => $companyDetail->id ,'payrollId' => $companyDetail->payroll->id, 'edit' => true])}}">Edit</a>
                                </div>
                                <h3 class="detail-heading">{{ @trans('payroll.payroll_setup') }}</h3>

                                <div class="info">
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('payroll.payroll_setup') }}</label>
                                        <p class="display-info">{{$payrollSetup->salary_payment_cycle != '' ? $payrollSetup->salary_payment_cycle : '-'}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('payroll.salary_payment_schedule') }}</label>
                                        <p class="display-info">{{$payrollSetup->payment_schedule != '' ? $payrollSetup->payment_schedule : '-'}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('payroll.monthly_working_days') }}</label>
                                        <p class="display-info">{{$payrollSetup->working_days != '' ? $payrollSetup->working_days : '-'}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('payroll.payroll_start_from') }}</label>
                                        <p class="display-info">{{$payrollSetup->start_date != '' ? $payrollSetup->start_date : '-'}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('payroll.retirement_year') }}</label>
                                        <p class="display-info">{{$payrollSetup->retirement_year != '' ? $payrollSetup->retirement_year : '-'}}</p>
                                    </div>
                                </div>
                                @endif

                                <!-- Start payroll team -->
                                <!-- Client Contact Person -->
                                @if(count($getContactDataList) > 0)
                                <div class="btn-group-em float-right mt-3 client-contact-table" role="group">
                                    <button type="button" class="btn btn-bordered btn-sm" data-toggle="modal" data-target="#add-client-contact-person">Add</button>
                                </div>
                                <h3 class="detail-heading client-contact-table">{{ @trans('payroll.client_contact') }}</h3>

                                <div class="info client-contact-table">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <table class="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>
                                @endif

                                <!--Payroll Admin-->
                                @if(count($getPayrollAdminData) > 0)
                                <!-- Payroll Admin -->
                                <div class="btn-group-em float-right mt-3 payroll-admin-table" role="group">
                                    <button type="button" class="btn btn-bordered btn-sm" data-toggle="modal" data-target="#add-payroll-admin">Add</button>
                                </div>
                                <h3 class="detail-heading payroll-admin-table">{{ @trans('payroll.payroll_admin') }}</h3>

                                <div class="info payroll-admin-table">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <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-admin">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <!-- Payroll Approver -->
                                @if($getPayrollApproverData > 0)
                                <h3 class="detail-heading payroll-approver-table">{{ @trans('payroll.payroll_approver') }}</h3>

                                <div class="info payroll-approver-table">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <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>
                                @endif
                                <!-- End payroll team -->

                                <!-- payroll Structure -->
                                @if(count($getCompanyDepartmentList) > 0)
                                <!-- Departments -->
                                <div class="btn-group-em float-right mt-3 department-lenght" role="group">
                                    <button type="button" class="btn btn-bordered btn-sm" data-toggle="modal" data-target="#modalAddDepartments">Add</button>
                                </div>
                                <h3 class="detail-heading department-lenght">{{ @trans('payroll.departments') }}</h3>
                                <div class="info department-lenght">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <table class="table" id="mtcTable">
                                                        <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>
                                </div>
                                @endif

                                <!--Line of Business-->
                                @if(count($lineOfBusiness) > 0)
                                <!--Line of bussiness start---->
                                <h2 class="form-sec-title bussiness-lenght">{{ @trans('payroll.line_of_business_title')}}</h2>
                                <div class="row mb-0 bussiness-lenght">
                                    <div class="col-md-12">
                                        <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-3">
                                                    <div class="form-group select line-business-select">
                                                        <select class="form-control" 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 href="javascript:void(0)" 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---->
                                @endif

                                <!-- Branches -->
                                @if(count($getCompanyBranchList) > 0)
                                <div class="btn-group-em float-right mt-3 branch-lenght" role="group">
                                    <button type="button" class="btn btn-bordered btn-sm" data-toggle="modal" data-target="#add-payroll-branch">Add</button>
                                </div>
                                <h3 class="detail-heading branch-lenght">{{ @trans('payroll.branch') }}</h3>
                                <div class="info branch-lenght">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <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>
                                </div>
                                @endif

                                <!--End payroll Structure -->

                                <!-- Earning Deductions -->
                                @if(count($getEarningDeductionList) > 0)
                                <div class="btn-group-em float-right mt-3 earning-lenght" role="group">
                                    <button type="button" class="btn btn-bordered btn-sm" data-toggle="modal" data-target="#add-new-benefits">Add</button>
                                </div>
                                <h3 class="detail-heading earning-lenght">{{ @trans('payroll.earnch_deductions') }}</h3>
                                <div class="info earning-lenght">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <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>
                                </div>
                                @endif
                                <!-- End Earning Deductions -->

                                <!-- Leave Type -->
                                @if(count($companyLeavesList) > 0)
                                <div class="btn-group-em float-right mt-3 leave-table" role="group">
                                    <a href="javascript:void(0)" class="btn btn-bordered btn-sm" 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: 3px;">
                                            settings
                                        </i></a>
                                    <button type="button" class="btn btn-bordered btn-sm" data-target="#add-leave-type" data-toggle="modal">Add</button>
                                </div>
                                <h3 class="detail-heading leave-table">{{ @trans('payroll.payroll_leaves') }}</h3>

                                <div class="info leave-table">
                                    <div class="row col-md-12">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive">
                                                    <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>
                                <!-- Leave type -->
                                @endif
                                @endif
                            </div>
                        </div>
                    </div>

                    <div id="cnct" class="tab-pane fade">

                        @if($contactDetail->count())
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="table-data">
                                    <div class="table-responsive">
                                        <table class="table" id="mtcTable">
                                            <thead>
                                                <tr>
                                                    <th>{{ @trans('company.name') }}</th>
                                                    <th>{{ @trans('company.mobile') }}</th>
                                                    <th>{{ @trans('company.email') }}</th>
                                                    <th>{{ @trans('company.designation') }}</th>
                                                    <th>{{ @trans('company.company_name') }}</th>
                                                    <th>{{ @trans('company.company_type') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($contactDetail as $contact)
                                                <tr>
                                                    <td><a href="{{ route('admin.contacts.show',['panel' => session('panel'), 'id' => $contact->id]) }}" target="_blank" class="d-block text-underlined">{{$contact->first_name}}
                                                            {{$contact->last_name}}</a>
                                                    </td>
                                                    <td>{{$contact->mobile}}</td>
                                                    <td>{{$contact->email}}</td>
                                                    <td>{{$contact->title}}</td>
                                                    <td>{{$contact->companies->name}}</td>
                                                    @if($contact->is_client && $contact->is_supplier)
                                                    <td>Client,Supplier</td>
                                                    @elseif($contact->is_client)
                                                    <td>Client</td>
                                                    @elseif($contact->is_supplier)
                                                    <td>Supplier</td>
                                                    @endif
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="row" v-if="!items.length && loaded == true">
                            <div class="col-md-12">
                                <div class="alert alert-warning" role="alert">
                                    {{ @trans('company.no_records_to_show') }}
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <div id="docs" class="tab-pane fade">
                        <div role="group" class="btn-group-em float-right mt-3">
                            <a class="btn btn-bordered btn-sm agreementAddButton" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="recruitment-agreement">Attach</a>
                        </div>
                        <h3 class="detail-heading">{{ @trans('job.recruitment_agreement') }}</h3>
                        <table class="table table-borderless table-sm table-layout-fixed @if(blank($agreements)) hidden @endif">
                            <thead>
                                <tr>
                                    <th class="border-0 shadow-none w-50">
                                        <label class="control-label normal gray m-0">Document Name</label>
                                    </th>
                                    <th class="border-0 shadow-none">
                                        <label class="control-label normal gray m-0">Uploaded By</label>
                                    </th>
                                    <th class="border-0 shadow-none"><label class="control-label normal gray m-0">Date</label></th>
                                    <th class="border-0 shadow-none"></th>
                                </tr>
                            </thead>
                            <tbody class="tbody_recruitment-agreement">
                                @foreach($agreements as $agreement)
                                <tr class="tr_{{ $agreement->id }}">
                                    <td class="display-info">{{ $agreement->title }}</td>
                                    <td class="display-info">
                                        @if($agreement->uploadedBy->user_type == 'candidate')
                                        Candidate
                                        @else
                                        {{ $agreement->uploadedBy->full_name }}
                                        @endif
                                    </td>
                                    <td class="display-info">{{ $agreement->updated_at_formatted }}</td>
                                    <td class="text-right">
                                        <a href="{{ $agreement->company_document_link }}" title="Download" class="mr-2" target="_blank">
                                            <i class="material-icons">get_app</i></a>
                                        <a href="javascript:void(0)" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="recruitment-agreement" upload-id="{{ $agreement->id }}" href="#editAttachModal" data-toggle="modal" data-target="#editAttachModal" data-filename="{{ $agreement->orig_file_name}}"><i class="material-icons">edit</i></a>
                                        <a href="javascript:void(0)" title="Delete" upload-id="{{ $agreement->id }}" class="deleteButton"><i class="material-icons">delete</i>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if(blank($agreements))
                        <span class="extrasmall-font">No agreement is uploaded yet!</span>
                        @endif
                        <br />

                        <div role="group" class="btn-group-em float-right mt-3">
                            <a class="btn btn-bordered btn-sm customAddButton" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="tax-details">Attach</a>
                        </div>
                        <h3 class="detail-heading">{{ @trans('company.tax_details')}}</h3>
                        <table class="table table-borderless table-sm table-layout-fixed @if(blank($taxdetails)) hidden @endif">
                            <thead>
                                <tr>
                                    <th class="border-0 shadow-none w-50">
                                        <label class="control-label normal gray m-0">Document Name</label>
                                    </th>
                                    <th class="border-0 shadow-none">
                                        <label class="control-label normal gray m-0">Uploaded By</label>
                                    </th>
                                    <th class="border-0 shadow-none"><label class="control-label normal gray m-0">Date</label></th>
                                    <th class="border-0 shadow-none"></th>
                                </tr>
                            </thead>
                            <tbody class="tbody_tax-details">
                                @foreach($taxdetails as $document)
                                <tr class="tr_{{ $document->id }}">
                                    <td class="display-info">{{ $document->title }}</td>
                                    <td class="display-info">
                                        @if($document->uploadedBy->user_type == 'candidate')
                                        Candidate
                                        @else
                                        {{ $document->uploadedBy->full_name }}
                                        @endif
                                    </td>
                                    <td class="display-info">{{ $document->updated_at_formatted }}</td>
                                    <td class="text-right">
                                        <a href="{{ $document->company_document_link }}" title="Download" class="mr-2" target="_blank">
                                            <i class="material-icons">get_app</i></a>
                                        <a href="javascript:void(0)" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="custom" upload-id="{{ $document->id }}" href="#editAttachModal" data-toggle="modal" data-target="#editAttachModal" data-filename="{{ $document->orig_file_name}}"><i class="material-icons">edit</i></a>
                                        <a href="javascript:void(0)" title="Delete" upload-id="{{ $document->id }}" class="deleteButton"><i class="material-icons">delete</i>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if(blank($taxdetails))
                        <span class="extrasmall-font">No tax document is uploaded yet!</span>
                        @endif
                        <br />

                        @if(count($financeDocuments) > 0)
                        <h3 class="detail-heading">{{ @trans('company.finance') }}</h3>
                        <table class="table table-borderless table-sm table-layout-fixed @if(blank($financeDocuments)) hidden @endif">
                            <thead>
                                <tr>
                                    <th class="border-0 shadow-none w-50">
                                        <label class="control-label normal gray m-0">Document Name</label>
                                    </th>
                                    <th class="border-0 shadow-none">
                                        <label class="control-label normal gray m-0">Uploaded By</label>
                                    </th>
                                    <th class="border-0 shadow-none"><label class="control-label normal gray m-0">Date</label></th>
                                    <th class="border-0 shadow-none"></th>
                                </tr>
                            </thead>
                            <tbody class="tbody_custom">
                                @foreach($financeDocuments as $document)
                                <tr class="tr_{{ $document->id }}">
                                    <td class="display-info">{{ $document->title }}</td>
                                    <td class="display-info">
                                        @if($document->uploadedBy->user_type == 'candidate')
                                        Candidate
                                        @else
                                        {{ $document->uploadedBy->full_name }}
                                        @endif
                                    </td>
                                    <td class="display-info">{{ $document->updated_at_formatted }}</td>
                                    <td class="text-right">
                                        <a href="{{ $document->company_document_link }}" title="Download" class="mr-2" target="_blank">
                                            <i class="material-icons">get_app</i></a>
                                        <a href="javascript:void(0)" title="Delete" upload-id="{{ $document->id }}" class="deleteButton"><i class="material-icons">delete</i>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if(blank($financeDocuments))
                        <span class="extrasmall-font">No finance document is uploaded yet!</span>
                        @endif
                        <br />
                        @endif

                        <div role="group" class="btn-group-em float-right mt-3">
                            <a class="btn btn-bordered btn-sm customAddButton" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="custom">Attach</a>
                        </div>
                        <h3 class="detail-heading">{{ @trans('job.other_documents') }}</h3>
                        <table class="table table-borderless table-sm table-layout-fixed @if(blank($documents)) hidden @endif">
                            <thead>
                                <tr>
                                    <th class="border-0 shadow-none w-50">
                                        <label class="control-label normal gray m-0">Document Name</label>
                                    </th>
                                    <th class="border-0 shadow-none">
                                        <label class="control-label normal gray m-0">Uploaded By</label>
                                    </th>
                                    <th class="border-0 shadow-none"><label class="control-label normal gray m-0">Date</label></th>
                                    <th class="border-0 shadow-none"></th>
                                </tr>
                            </thead>
                            <tbody class="tbody_custom">
                                @foreach($documents as $document)
                                <tr class="tr_{{ $document->id }}">
                                    <td class="display-info">{{ $document->title }}</td>
                                    <td class="display-info">
                                        @if($document->uploadedBy->user_type == 'candidate')
                                        Candidate
                                        @else
                                        {{ $document->uploadedBy->full_name }}
                                        @endif
                                    </td>
                                    <td class="display-info">{{ $document->updated_at_formatted }}</td>
                                    <td class="text-right">
                                        <a href="{{ $document->company_document_link }}" title="Download" class="mr-2" target="_blank">
                                            <i class="material-icons">get_app</i></a>
                                        <a href="javascript:void(0)" data-company-id="{{ $companyDetail->id}}" data-doc-type-id="custom" upload-id="{{ $document->id }}" href="#editAttachModal" data-toggle="modal" data-target="#editAttachModal" data-filename="{{ $document->orig_file_name}}"><i class="material-icons">edit</i></a>
                                        <a href="javascript:void(0)" title="Delete" upload-id="{{ $document->id }}" class="deleteButton"><i class="material-icons">delete</i>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @if(blank($documents))
                        <span class="extrasmall-font">No document is uploaded yet!</span>
                        @endif
                        <br />


                    </div>

                    <div id="bank" class="tab-pane fade">
                        <div class="table-wrapper mt-4">
                            <div class="table-top-panel d-flex align-items-center">
                                <div class="form-group search-input float-left mb-0 __web-inspector-hide-shortcut__">
                                    <img src="/img/ic_search.png" srcset="/img/ic_search@2x.png 2x" alt="search">
                                    <input type="text" name="search_text" id="search_text" @keyUp="search" placeholder="Search">
                                </div>
                                <div role="group" class="btn-group-em float-right ml-auto mt-3">
                                    <a class="btn btn-em" data-toggle="modal" data-target="#modalAddBankDetails" style="color: white;">Add New</a>
                                </div>
                            </div>

                            <div class="table-data company-bank-details-lenght">
                                <div class="table-responsive table-checkable">
                                    <table class="table" id="mtcTable" v-if="items.length > 0">
                                        <thead>
                                            <tr>
                                                <th>
                                                    #
                                                </th>
                                                <th>{{ @trans('company.bank_name') }}</th>
                                                <th>{{ @trans('company.branch_name') }}</th>
                                                <th>{{ @trans('company.branch_code') }}</th>
                                                <th>{{ @trans('company.account_name') }}</th>
                                                <th>{{ @trans('company.account_number') }}</th>
                                                <th>{{ @trans('company.bank_code') }}</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="company-bank-details">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="table-data" id="company-bank-details-lenght">

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

                    <div id="employees" class="tab-pane fade">
                        <main-component company-id="{{$companyDetail->id}}" v-if="['employees-list', 'employee-details'].includes($route.matched[0].name)" />
                    </div>
                    <div id="payroll" class="tab-pane fade">
                        <main-component company-id="{{$companyDetail->id}}" v-if="$route.name == 'payroll-process'" />
                    </div>
                    <div id="payrollApprove" class="tab-pane fade">
                        <main-component company-id="{{$companyDetail->id}}" v-if="$route.name == 'payroll-approve'" />
                    </div>
                    <div id="payslips" class="tab-pane fade">
                        <payslip-component company-id="{{$companyDetail->id}}" v-if="$route.name == 'payslip'" />
                    </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.store_leaves_quota')
@include('payroll::company_payroll.modules.modals.store_earning_deduction')
<!-- 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.store_bank_details')
@include('payroll::company_payroll.modules.modals.store_leave_allocation_quota')
@include('payroll::company_payroll.modules.modals.common_confirmation_modal')
@endsection
@push('pageModals')
<div class="modal fade" id="attachModal" style="z-index: 9999;" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">

            <form id="frmAttach" method="post" enctype="multipart/form-data" action="">

                <input type="hidden" name="companyId" id="companyId" value="" />
                <input type="hidden" name="docTypeId" id="docTypeId" value="" />

                @csrf

                <!-- Modal Header -->
                <div class="modal-header new-light-bg border-0">
                    <h4 class="modal-title regular body-font-size">Attach</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p class="mb-1 small-font-size title1">Upload your documents</p>
                    <p class="gray xs-font-size title2">You can upload upload multiple files at a time.</p>

                    <div class="set attach-list-row">
                        <div class="form-group mb-1 documentFileNameClass">
                            <label class="control-label">Upload File</label>
                            <div class="custom-file w-100 file-type-new">
                                <input type="file" class="custom-file-input w-100 fileInput" name="document[]">
                                <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                    file...</label>
                                <span class="attachment-bg"><img src="{{ asset('img/admin/ic-attachment-dark.svg') }}" alt="ic-attachment" /></span>
                            </div>
                            <span class="m-0 xs-font-size showDocumentFileName"></span>
                        </div>
                        <div class="align-items-start d-flex">
                            <div class="form-group mb-0 mr-2">
                                <label class="control-label">Document Name</label>
                                <input type="text" class="form-control titleInput" placeholder="Type here..." name="title[]" />
                            </div>
                            <a href="javascript:void(0)" class="mt-4 px-1 pt-3 pb-2 act text-center adder"><span class="material-icons gray">add</span></a>
                        </div>
                        <hr />
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="custom-control custom-checkbox d-flex align-items-center">
                                <input type="checkbox" class="custom-control-input" id="set_reminder" name="set_reminder" value="1">
                                <label class="custom-control-label" for="set_reminder">{{ @trans('payroll.set_reminder') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row enable-reminder hidden">
                        <div class="col-md-6">
                            <div class="form-group date">
                                <label class="control-label">{{ @trans('payroll.reminder_date') }}
                                </label>
                                <div class="input-group date">
                                    <input type="text" class="form-control reminder_document_date bg-white dateselect" placeholder="{{ @trans('payroll.reminder_date') }}" id="reminder_document_date" name="reminder_document_date">
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('payroll.email') }}
                                </label>
                                <input type="text" id="email" name="email" class="form-control" placeholder="{{ @trans('payroll.email') }}">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('payroll.notes') }}
                                </label>
                                <input type="text" id="notes" name="notes" class="form-control" placeholder="{{ @trans('payroll.notes') }}">
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                    <input type="submit" class="btn btn-em submitfrmAttach" value="Submit" />
                </div>

            </form>

        </div>
    </div>
</div>
<div class="modal fade" id="editAttachModal" style="z-index: 9999;" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">

            <form id="editFrmAttach" method="post" enctype="multipart/form-data" action="">

                <input type="hidden" name="uploadId" id="uploadId" value="" />
                <input type="hidden" name="companyId" id="companyId" value="" />
                <input type="hidden" name="docTypeId" id="docTypeId" value="" />
                @csrf

                <!-- Modal Header -->
                <div class="modal-header new-light-bg">
                    <h4 class="modal-title regular body-font-size">Edit File</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">

                    <p class="mb-1 small-font-size title1">Edit your documents</p>
                    <p class="gray xs-font-size title2">Valid files are PDF, Word, Images(png/jpg).</p>

                    <div class="attach-list-row">
                        <div class="form-group mb-1 documentFileNameClass">
                            <label class="control-label">Upload File</label>
                            <div class="custom-file w-100 file-type-new">
                                <input type="file" class="custom-file-input w-100" name="document[]">
                                <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                    file...</label>
                                <span class="attachment-bg"><img src="{{ asset('img/ic-attachment-dark.svg') }}" alt="ic-attachment"></span>
                            </div>
                            <span class="m-0 xs-font-size documentFileName"></span>
                        </div>
                        <div class="align-items-start d-flex">
                            <div class="form-group mb-0 mr-2">
                                <label class="control-label">Document Name</label>
                                <input type="text" class="form-control editTitleInput" id="document_title" name="title[]">
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                    <input type="submit" class="btn btn-em submitfrmEditAttach" value="Submit" />
                </div>

            </form>

        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="modalDeleteConfirm">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ @trans('delete_modal.confirm') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>{{ @trans('delete_modal.confirmation') }}?</p>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-cncl" data-dismiss="modal">{{ @trans('delete_modal.cancel')
                    }}</button>
                <button type="button" class="btn btn-danger destroy">{{ @trans('delete_modal.delete') }}</button>
            </div>

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

<!-- First time enable-payroll popup -->
<div class="modal fade" id="modalPayrollEnableConfirm">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ @trans('payroll.payroll_enable_confirmation') }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div>
                    <p class="mb-0 payroll-message"></p>
                </div>
            </div>
            <div class="modal-footer justify-content-center bg-transparent">
                <button type="button" class="btn btn-cncl w-100" data-dismiss="modal">{{ @trans('delete_modal.cancel') }}</button>
                <a href="{{ route('admin.payroll.companies.payrollSetup',['panel' => Session::get('panel'), 'id' => $companyDetail->id]) }}" class="btn btn-em w-100">{{ @trans('payroll.enable_payroll') }}</a>
            </div>
        </div>
    </div>
</div>

<!--Enable payroll second time-->
<div class="modal fade" id="modalPayrollEnableSecondTimeConfirm">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ @trans('payroll.payroll_enable_confirmation') }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div>
                    <p class="mb-0 payroll-message"> {{ trans('payroll.again_enable_payroll_confirm') }} </p>
                </div>
            </div>
            <div class="modal-footer justify-content-center bg-transparent">
                <button type="button" class="btn btn-cncl w-100" data-dismiss="modal">{{ @trans('delete_modal.cancel') }}</button>
                <button type="button" id="payroll_enable" class="btn btn-em w-100">{{ @trans('payroll.enable_payroll') }}</button>
            </div>
        </div>
    </div>
</div>

<!--Disable payroll modal pop-up-->
<div class="modal fade" id="modalPayrollDisableConfirm">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ @trans('payroll.payroll_disable_confirmation') }}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div>
                    <p class="mb-0 payroll-message"> {{ trans('payroll.disable_payroll_confirm') }}</p>
                </div>
            </div>
            <div class="modal-footer justify-content-center bg-transparent">
                <button type="button" class="btn btn-cncl w-100" data-dismiss="modal">{{ @trans('delete_modal.cancel') }}</button>
                <button type="button" id="payroll_disable" class="btn btn-em w-100">{{ @trans('payroll.disable_payroll') }}</button>
            </div>
        </div>
    </div>
</div>
@endpush


@push('pageJs')
@routes
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/select2-tree.js') }}"></script>
<script>
    $(document).ready(function() {

        let showactiveRoute = $('#currentRoute').val();

        if (showactiveRoute == 'admin.companies.payrollProcess') {

            $('#payrollProcessingTab').tab('show');
            var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
            Cookies.set('company.current_tab', '#payroll', {
                expires: inFifteenMinutes
            });
        } else if (showactiveRoute == 'admin.payroll.tabs') {
            $('#employeestab').tab('show');
            var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
            Cookies.set('company.current_tab', '#employees', {
                expires: inFifteenMinutes
            });
        } else if (showactiveRoute == 'admin.companies.payslips') {
            $('#payrollPayslipsTab').tab('show');
            var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
            Cookies.set('company.current_tab', '#payslips', {
                expires: inFifteenMinutes
            });
        } else if (showactiveRoute == 'admin.companies.payrollApprove') {
            $('#payrollApprovalTab').tab('show');
            var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
            Cookies.set('company.current_tab', '#payrollApprove', {
                expires: inFifteenMinutes
            });
        }

        $('#employeeTab').click(function() {
            emitEmployeeListEvent();
        });

        $('#payrollProcessingTab').click(function() {
            emitPayrollProcessListEvent()
        });

        $('#payrollApprovalTab').click(function() {
            emitPayrollApproveListEvent()
        });

        $('#payrollPayslipsTab').click(function() {
            emitPayrollPayslipListEvent()
        });

        $('#detailTab').click(function() {
            emitCompanyDetailEvent('company-detail-event', 'doc')
        });

        $('#contactTab').click(function() {
            emitCompanyDetailEvent('company-detail-event', 'doc')
        });

        $('#docsTab').click(function() {
            emitCompanyDetailEvent('company-detail-event', 'doc')
        });

        $('#bankTab').click(function() {
            emitCompanyDetailEvent('company-detail-event', 'doc')
        });
        getBankDetailsData()

        function emitCompanyDetailEvent(eventName, data) {
            var event = new CustomEvent(eventName, {
                detail: data
            });
            document.dispatchEvent(event);
        }

        function emitEmployeeListEvent(data = 'employee') {
            var event = new CustomEvent('employee-list-event', {
                detail: data
            });
            document.dispatchEvent(event);
        }

        function emitPayrollProcessListEvent() {
            var event = new CustomEvent('payroll-process-list-event');
            document.dispatchEvent(event);
        }

        function emitPayrollApproveListEvent() {
            var event = new CustomEvent('payroll-approve-list-event');
            document.dispatchEvent(event);
        }

        function emitPayrollPayslipListEvent() {
            var event = new CustomEvent('payslip-process-list-event');
            document.dispatchEvent(event);
        }

        var $date = $('#reminder_document_date').datepicker({
            autoHide: true,
            format: 'dd-mm-yyyy',
            zIndex: 2048,
            startDate: null,
            defaultViewDate: new Date(),
        });
        $('#reminder_document_date').change(function() {
            $(this).valid();
        })
        /*Payroll disable*/
        $('#payroll_disable').click(function(event) {
            $('#payroll_disable').text('Please wait...');
            $('#payroll_disable').attr('disabled', 'disabled');
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var company_id = $('#company_id').val();
            $.ajax({
                url: '{{ route("admin.payroll.update.payrollDisable", ["panel" => session("panel")]) }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'company_id': company_id,
                    'status': 'inactive'
                },

                success: function(response) {
                    // Handle the response from the server
                    if (response.code == 200) {
                        location.reload();

                        Snackbar.show({
                            pos: 'bottom-right',
                            text: response.message,
                            actionText: 'Okay'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle errors
                }
            });
        });

        /*Payroll enable*/
        $('#payroll_enable').click(function(event) {
            $('#payroll_enable').text('Please wait...');
            $('#payroll_enable').attr('disabled', 'disabled');
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            var company_id = $('#company_id').val();
            $.ajax({
                url: '{{ route("admin.payroll.update.payrollEnable", ["panel" => session("panel")]) }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: {
                    'company_id': company_id,
                    'status': 'active'
                },

                success: function(response) {
                    // Handle the response from the server
                    if (response.code == 200) {
                        location.reload();

                        Snackbar.show({
                            pos: 'bottom-right',
                            text: response.message,
                            actionText: 'Okay'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Handle errors
                }
            });
        });

        $('#attachModal').on('show.bs.modal', function(e) {
            var companyId = $(e.relatedTarget).attr('data-company-id');
            var docTypeId = $(e.relatedTarget).attr('data-doc-type-id');
            $('#frmAttach #companyId').val(companyId);
            $('#frmAttach #docTypeId').val(docTypeId);

            if ($(e.relatedTarget).attr('data-doc-type-id') == 'recruitment-agreement') {
                $('#frmAttach .title1').text('Upload your agreement document');
                $('#frmAttach .title2').text(
                    'Valid files are PDF, Word, Images (png/jpg)'
                );
                $('#frmAttach .adder').remove();
            }
        });

        $('#attachModal').on('hidden.bs.modal', function(e) {
            $('#frmAttach').find('.cloned').remove();
            $('#frmAttach').trigger('reset');
            $('#frmAttach').find('.invalid-feedback').remove();
            $('.showDocumentFileName').empty();
            $('#frmAttach').find('.custom-file-input').removeClass('is-invalid');
            $('#frmAttach').find('.form-control').removeClass('is-invalid');
            $('.enable-reminder').addClass('hidden');
        });


        $(document).on('change', '#frmAttach input[type="file"]', function(e) {
            $(this).parents('.documentFileNameClass').find('.showDocumentFileName').text(e.target.files[
                0].name);
        });

        $("#frmAttach").validate({
            rules: {
                'document[]': {
                    required: true,
                    extension: function(element) {
                        if ($('#attachModal #docTypeId').val() == 'recruitment-agreement')
                            return 'doc|docx|odt|pdf|jpeg|jpg|png';
                    },
                },
                'title[]': {
                    required: true
                },
                reminder_document_date: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    }
                },
                email: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    },
                },
                notes: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    }
                }
            },
            messages: {
                'document[]': {
                    required: "This field is required.",
                    extension: function(element) {
                        if ($('#attachModal #docTypeId').val() == 'recruitment-agreement')
                            return 'Valid files are PDF, Word, Images (png/jpg)';
                    },
                },
                title: {
                    required: 'This field is required.'
                }
            }
        });

        $(document).on('submit', '#frmAttach', function(e) {
            e.preventDefault();
            if ($('#frmAttach').valid()) {
                var formData = new FormData(this);
                var docId = $('#frmAttach #docTypeId').val()
                var companyId = $('#frmAttach #companyId').val()

                $('#frmAttach .submitfrmAttach').attr('disabled', true);
                $('#frmAttach .submitfrmAttach').val('Uploading...');

                $.ajax({
                    type: 'POST',
                    url: "{{ route('admin.companies.storeDocuments', ['panel'=> session('panel')]) }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        //showLoader();
                    },
                    success: function(response) {
                        $('.showDocumentFileName').empty();
                        var res = response;
                        $.each(res, function(key, value) {
                            var html = '<tr class="tr_' + value.id + '">\
                                                <td class="display-info">' + value.title + '</td>\
                                                <td class="display-info">' + value.uploaded_by.full_name + '</td>\
                                                <td class="display-info">' + value.updated_at_formatted + '</td>\
                                                <td class="text-right">\
                                                    <a href="' + value.company_document_link + '"\
                                                        title="Download" class="mr-2" target="_blank">\
                                                        <i class="material-icons">get_app</i></a>\
                                                        <a href="javascript:void(0)"\
                                                        data-company-id="' + companyId + '"\
                                                        data-doc-type-id="' + docId + '"\
                                                        upload-id="' + value.id + '"\
                                                        data-filename="' + value.orig_file_name + '"\
                                                        href="#editAttachModal" data-toggle="modal"\
                                                        data-target="#editAttachModal">\
                                                        <i class="material-icons">edit</i></a>';

                            html += '<a href="javascript:void(0)" title="Delete" \
                                    upload-id="' + value.id + '" class="deleteButton">\
                                    <i class="material-icons">delete</i></a>';
                            html += '</td></tr>';

                            $('.tbody_' + value.type).append(html);
                            $('.tbody_' + value.type).parents(
                                '.table').removeClass('hidden');
                            $('.tbody_' + value.type).parents(
                                '.table').next('span').addClass('hidden');

                            Snackbar.show({
                                pos: 'bottom-right',
                                text: "Document uploaded successfully",
                                actionText: 'Okay'
                            });

                        });

                        $('#frmAttach .submitfrmAttach').attr('disabled', false);
                        $('#frmAttach .submitfrmAttach').val('Submit');
                        $("#frmAttach").trigger('reset');
                        $('#attachModal').modal('hide');
                        //hideLoder();
                    }
                });
            }
        });

        $('#set_reminder').on('change', function(e) {
            var enabledCarryOver = $("input[name='set_reminder']:checked").val();
            if (enabledCarryOver == true) {
                $('.enable-reminder').removeClass('hidden');
            } else {
                $('.enable-reminder').addClass('hidden');
            }
        });

        // edit attachment methods
        $('#editAttachModal').on('hidden.bs.modal', function(e) {
            $('#editFrmAttach').trigger('reset');
            $('#editFrmAttach').find('.invalid-feedback').remove('span');
            $('#editFrmAttach').find('.custom-file-input').removeClass('is-invalid');
            $('#editFrmAttach').find('.form-control').removeClass('is-invalid');
        });

        $('#editAttachModal').on('show.bs.modal', function(e) {
            var companyId = $(e.relatedTarget).attr('data-company-id');
            var docTypeId = $(e.relatedTarget).attr('data-doc-type-id');
            var uploadId = $(e.relatedTarget).attr('upload-id');
            $('#editFrmAttach #companyId').val(companyId);
            $('#editFrmAttach #docTypeId').val(docTypeId);
            $('#editFrmAttach #uploadId').val(uploadId);

            var filename = $(e.relatedTarget).attr('data-filename');
            var title = $(e.relatedTarget).closest('tr').find("td:eq(0)").text();
            if (!title) {
                var title = $(e.relatedTarget).attr('data-title');
            }

            $('#editFrmAttach .documentFileName').text(filename);
            $('#editFrmAttach .editTitleInput').val(title);

            if ($(e.relatedTarget).attr('data-doc-type-id') == 'recruitement-agreement') {
                $('#editFrmAttach .title1').text('Upload your agreement document');
                $('#editFrmAttach .title2').text('Valid files are PDF, Word, Images (png/jpg)');
                $('#editFrmAttach .editTitleInput').attr('placeholder', 'Your Name - PDF CV');
            } else if ($(e.relatedTarget).attr('data-doc-type-id') == 'invoice-receipt') {
                $('#editFrmAttach .title2').text('Valid files are PDF, Images (jpg)');
            } else {
                $('#editFrmAttach .title2').text('Valid files are PDF, Word, Images (png/jpg)');
            }
        });

        $('#modalPayrollEnableConfirm').on('show.bs.modal', function(e) {
            var companyName = $(e.relatedTarget).attr('data-company-name');
            var translations = "@lang('payroll.payroll_confirmation_message')";
            message = translations.replace(':companyName', companyName);
            $('.payroll-message').text(message);
        });

        $(document).on('click', '#enablePayroll', function(e) {
            e.preventDefault();
            var url =
                "{{ route('admin.payroll.companies.payrollSetup',['panel' => Session::get('panel'), 'id' => $companyDetail->id]) }}";
            axios.get(url, {}).then(function(response) {
                window.location.reload();
            });
        });

        $("#editFrmAttach").validate({
            rules: {
                'document[]': {
                    extension: function(element) {
                        if ($('#editFrmAttach #docTypeId').val() == 'recruitement-agreement')
                            return 'doc|docx|odt|pdf|jpeg|jpg|png';
                        else($('#editFrmAttach #docTypeId').val() == 'invoice-receipt')
                        return 'jpg|jpeg|pdf';
                    },
                    filesize: 25
                },
                'title[]': {
                    required: true
                }
            },
            messages: {
                'document[]': {
                    extension: function(element) {
                        if ($('#editFrmAttach #docTypeId').val() == 'recruitement-agreement')
                            return 'Valid files are PDF, Word, Images (png/jpg)';
                        else if ($('#editFrmAttach #docTypeId').val() == 'invoice-receipt')
                            return 'Valid files are PDF, Images (jpeg/jpg)';
                    },
                },
                'title[]': {
                    required: 'This field is required'
                }
            }
        });

        $(document).on('change', '#editFrmAttach input[type="file"]', function(e) {
            $(this).parents('.documentFileNameClass').find('.documentFileName').text(e.target.files[
                0].name);
        });

        $('#editFrmAttach').on('submit', function(e) {
            e.preventDefault();
            if ($('#editFrmAttach').valid()) {

                var formData = new FormData(this);
                var docId = $('#editFrmAttach #docTypeId').val()
                var companyId = $('#editFrmAttach #companyId').val()
                var uploadId = $('#editFrmAttach #uploadId').val()

                $('#editFrmAttach .submitfrmEditAttach').attr('disabled', true);
                $('#editFrmAttach .submitfrmEditAttach').val('Uploading...');

                $.ajax({
                    type: 'POST',
                    url: "{{ route('admin.companies.storeDocuments', ['panel'=> session('panel')]) }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        //showLoader();
                    },
                    success: function(response) {
                        $('.showDocumentFileName').empty();
                        var res = response;
                        $.each(res, function(key, value) {
                            var html = '<tr class="tr_' + value.id + '">\
                                                <td class="display-info">' + value.title + '</td>\
                                                <td class="display-info">' + value.uploaded_by.full_name + '</td>\
                                                <td class="display-info">' + value.updated_at_formatted + '</td>\
                                                <td class="text-right">\
                                                    <a href="' + value.company_document_link + '"\
                                                        title="Download" class="mr-2" target="_blank">\
                                                        <i class="material-icons">get_app</i></a>\
                                                        <a href="javascript:void(0)"\
                                                        data-company-id="' + companyId + '"\
                                                        data-doc-type-id="' + docId + '"\
                                                        upload-id="' + uploadId + '"\
                                                        data-filename="' + value.orig_file_name + '"\
                                                        href="#editAttachModal" data-toggle="modal"\
                                                        data-target="#editAttachModal">\
                                                        <i class="material-icons">edit</i></a>';
                            html += '<a href="javascript:void(0)" title="Delete" \
                                    upload-id="' + value.id + '" class="deleteButton">\
                                    <i\ class="material-icons">delete</i></a>';
                            html += '</td></tr>';

                            if (value.type == 'recruitment-agreement') {
                                var editButton = '<a class="dropdown-item agreementAddButton" href="#editAttachModal"\
                                    data-toggle="modal" data-target="#editAttachModal"\
                                    data-company-id="' + companyId + '" data-doc-type-id="recruitment-agreement" upload-id="' +
                                    value.id + '"\
                                    data-filename="' + value.orig_file_name + '" data-title="' + value.title +
                                    '">Attach</a>';
                                $('.agreementAddButton').replaceWith(editButton);
                            }

                            $('.tr_' + value.id).replaceWith(html);
                            Snackbar.show({
                                pos: 'bottom-right',
                                text: "Document updated successfully",
                                actionText: 'Okay'
                            });

                        });
                        $('#editFrmAttach .submitfrmEditAttach').attr('disabled', false);
                        $('#editFrmAttach .submitfrmEditAttach').val('Submit');
                        $("#editFrmAttach").trigger('reset');
                        $('#editAttachModal').modal('hide');
                        //hideLoder();
                    }
                });
            }
        });

        $(document).on('click', '.deleteButton', function(e) {

            var ev = $(e.target);
            var uploadId = $(e.target).parent('a').attr('upload-id');
            var url =
                "{{ route('admin.companies.delete_document', ['panel' => session('panel') ]) }}";
            axios.post(url, {
                    id: uploadId
                })
                .then(function(response) {
                    var trNumber = ev.parents('tbody').find('tr').length;
                    if (trNumber == 1) {
                        ev.parents('table:first').addClass('hidden');
                        ev.parents('table:first').next('span').removeClass('hidden');
                    }
                    ev.parents('tr:first').remove();
                    Snackbar.show({
                        pos: 'bottom-right',
                        text: 'Document removed successfully',
                        actionText: 'Okay'
                    });
                })
                .catch(function(error) {});
        });

        @if(Session::has('message'))
        Snackbar.show({
            pos: 'bottom-right',
            text: "{!! session('message') !!}",
            actionText: 'Okay'
        });
        @endif

        $('.nav-tabs a').on('click', function(e) {
            e.preventDefault();
            $(this).tab('show');
            var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
            Cookies.set('company.current_tab', $(this).attr('href'), {
                expires: inFifteenMinutes
            });
        })
        // var tab = Cookies.get('company.current_tab');
        // if (typeof tab == 'undefined') {
        var tab = '#detail';
        // }

        $('.nav-tabs a[href="' + tab + '"]').tab('show');

    });
</script>
<!-- start team -->
<script>
    $(document).ready(function() {
        var CustomSelectionAdapter = $.fn.select2.amd.require(
            "select2/selection/customSelectionAdapter"
        );

        $(".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)

        });

        /*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();
            clientContact(inputValue)

        });

        $('.frachise_contact').next().find('.select2-search__field').on('input', function() {
            var inputValue = $(this).val();
            externalFrachiseContact(inputValue)
        });

        $('.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');
            }

        });

        $('.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");
            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();

        }

    });
    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>
<!-- end team -->

<!-- start structure -->
<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";

        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()

        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")]) }}';
    var getDepartmentDataIndexUrl = '{{ route("admin.payroll.getDepartmentData", ["panel" => session("panel")]) }}';
    var lineOfBusinessGetDataIndexUrl = '{{ route("admin.payroll.lineOfBusinessGetData", ["panel" => session("panel")]) }}';
    var getSearchJsonIndexUrl = '{{route("common.get_search_json")}}';
    var getBankDetailsList = '{{ route("admin.payroll.getBankDetailslist", ["panel" => session("panel")]) }}';
</script>
<!-- end structure -->

<!-- start Leave type -->
<script>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 2,
            allowThouSep: false,
            min: 1,
        });
    });

    $(document).ready(function() {
        getLeaveData();

        /*Update leave list when leave updated or inserted*/
        $('#addLeaveQuota').on('click', function() {
            getLeaveData();
        });
    });
    var payrollLeaveIndexUrl = "{{ route('admin.payroll.companyLeaveList', ['panel' => session('panel'), 'id' => 0]) }}";
</script>
<!-- end leave type -->

<!-- start earning deduction -->
<script>
    $(document).ready(function() {

    });

    /*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 for proceed next step.',
                min: 'Add atleast one record for proceed next step.',
                number: 'Add atleast one record for 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).val('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>
<!-- end earning deduction -->
<script>
    var panel = "{{ Session::get('panel') }}";
    var companyId = "{{$companyDetail->id}}";
    var currencyCode = "{{$companyDetail->countries->currency_code}}";
    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
    @endif
</script>
<script src="{{ mix('js/employees.js') }}"></script>
<script src="{{ mix('js/company-payroll-process.js') }}"></script>
@if (in_array(auth()->id(), $payrollApproverIds))
<script src="{{ mix('js/company-payroll-approve.js') }}"></script>
@endif
<script src="{{ mix('js/payslip.js') }}"></script>
<script src="{{ asset('js/payroll-setup/team.js')}}"></script>
<script src="{{ asset('js/payroll-setup/leave.js')}}"></script>
<script src="{{ asset('js/payroll-setup/earning_deduction.js')}}"></script>
<script src="{{ asset('js/payroll-setup/structure.js')}}"></script>
<script src="{{ asset('js/payroll-setup/bank_details.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