@extends('master')

@section('content')
    <section>
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <div id="kt_content_container" class="container-fluid">
                <!--begin::Stepper-->
                <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid"
                    id="kt_create_account_stepper">

                    <!--begin::Aside-->
                    <div
                        class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-300px me-9">
                        <!--begin::Wrapper-->
                        <div class="card-body px-6 px-lg-10 px-xxl-8 py-10">
                            <!--begin::Nav-->
                            <div class="stepper-nav">
                                <!--begin::Step 1-->
                                <div class="stepper-item {{ request()->is('hrm/employee/create', 'hrm/employee/edit/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">1</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="{{ route('salary_basic.index') }}"
                                            id="Salary-basic-tab" data-toggle="tab" data-table="salary"
                                            data-target="#Salary_basic" role="tab" aria-controls="Salary_basic"
                                            aria-selected="true">
                                            <h3 class="stepper-title">Basic Salary</h3>
                                            <div class="stepper-desc fw-bold">Setup Basic Salary</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 1-->

                                <!--begin::Step 2-->
                                <div class="stepper-item {{ request()->is('hrm/employee/official-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">2</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link " href="#" id="Salary_allowance-tab"
                                            data-toggle="tab" data-table="salary_allowance" data-target="#Salary_allowance"
                                            role="tab" aria-controls="Salary_allowance" aria-selected="false">
                                            <h3 class="stepper-title">Allowances</h3>
                                            <div class="stepper-desc fw-bold">Setup Allowances</div>
                                        </a>

                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 2-->

                                <!--begin::Step 3-->
                                <div class="stepper-item {{ request()->is('hrm/employee/education-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">3</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="#" id="Others-tab" data-toggle="tab"
                                            data-table="others" data-target="#Others" role="tab" aria-controls="Others"
                                            aria-selected="false">
                                            <h3 class="stepper-title">Bonus</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Bonus</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 3-->

                                <!--begin::Step 4-->
                                <div class="stepper-item {{ request()->is('hrm/employee/bank-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">4</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link " href="#" id="Deductions-tab" data-toggle="tab"
                                            data-table="deductions" data-target="#Deductions" role="tab"
                                            aria-controls="Deductions" aria-selected="false">
                                            <h3 class="stepper-title">Statutory Deductions</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Statutory Deductions</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 4-->

                                <!--begin::Step 5-->

                                <!--end::Step 5-->

                                <!--begin::Step 6-->
                                {{-- <div class="stepper-item {{ request()->is('hrm/employee/training-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">6</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="#" id="Overtime-tab" data-toggle="tab"
                                            data-table="overtime" data-target="#Overtime" role="tab"
                                            aria-controls="Overtime" aria-selected="false">
                                            <h3 class="stepper-title">Overtime</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Overtime</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div> --}}
                                <!--end::Step 6-->

                                <!--begin::Step 7-->
                                <div class="stepper-item {{ request()->is('hrm/employee/professional-certificate-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">5</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->

                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="#" id="Pension-tab" data-toggle="tab"
                                            data-table="pension" data-target="#Pension" role="tab"
                                            aria-controls="Pension" aria-selected="false">
                                            <h3 class="stepper-title">Provident Fund</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Provident Fund</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 7-->

                                <!--begin::Step 7-->
                                <div class="stepper-item {{ request()->is('hrm/employee/professional-certificate-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">6</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->

                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="#" id="Loan-tab" data-toggle="tab"
                                            data-table="loan" data-target="#Loan" role="tab" aria-controls="Loan"
                                            aria-selected="false">
                                            <h3 class="stepper-title">Loan</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Loan</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 7-->

                                <!--begin::Step 6-->
                                <div class="stepper-item {{ request()->is('hrm/employee/training-info/*') ? 'current' : '' }}"
                                    data-kt-stepper-element="nav">
                                    <!--begin::Line-->
                                    <div class="stepper-line w-40px"></div>
                                    <!--end::Line-->
                                    <!--begin::Icon-->
                                    <div class="stepper-icon w-40px h-40px">
                                        <i class="stepper-check fas fa-check"></i>
                                        <span class="stepper-number">7</span>
                                    </div>
                                    <!--end::Icon-->
                                    <!--begin::Label-->
                                    <div class="stepper-label">
                                        <a class="payroll-nav-link" href="#" id="Payslip-tab" data-toggle="tab"
                                            data-table="payslip" data-target="#Payslip" role="tab"
                                            aria-controls="Payslip" aria-selected="false">
                                            <h3 class="stepper-title">Payslip</h3>
                                            <div class="stepper-desc fw-bold">Setup Your Payslip</div>
                                        </a>
                                    </div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Step 6-->


                            </div>
                            <!--end::Nav-->
                        </div>
                        <!--end::Wrapper-->
                    </div>


                    <!--begin::Aside-->

                    <!--begin::Content-->
                    <div class="card d-flex flex-row-fluid">
                        <div class="tab-content" id="myTabContent">
                            <div class="pt-0 tab-pane fade show active" id="Salary_basic" role="tab"
                                aria-labelledby="Salary-basic-tab">
                                @include('hr.employee.salary.basic.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Salary_allowance" role="tab"
                                aria-labelledby="Salary_allowance-tab">
                                @include('hr.employee.salary.allowance.index')
                            </div>
                            <div class="pt-0 tab-pane fade" id="Commissions" role="tab"
                                aria-labelledby="Commissions-tab">
                                @include('hr.employee.salary.commission.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Others" role="tab" aria-labelledby="Others-tab">
                                @include('hr.employee.salary.other_payment.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Overtime" role="tab"
                                aria-labelledby="Overtime-tab">
                                @include('hr.employee.salary.overtime.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Loan" role="tab" aria-labelledby="Loan-tab">
                                @include('hr.employee.salary.loan.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Payslip" role="tab"
                                aria-labelledby="Payslip-tab">
                                @include('hr.employee.payslip.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Pension" role="tab"
                                aria-labelledby="Pension-tab">
                                @include('hr.employee.salary.pension.index')
                            </div>
                            <div class="pt-0 tab-pane fade " id="Deductions" role="tab"
                                aria-labelledby="Deductions-tab">
                                @include('hr.employee.salary.deduction.index')
                            </div>

                        </div>
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Stepper-->
            </div>
        </div>
    </section>
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        (function($) {
            "use strict";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            // Initial load for leave type
            let leaveLoad = 0;
            $(document).ready(function() {
                if (leaveLoad == 0) {
                    @include('hr.employee.salary.basic.index_js')
                    leaveLoad = 1;
                }
            });

            // Handle tab clicks
            $('.payroll-nav-link').on('click', function(e) {
                e.preventDefault(); // Prevent navigation
                e.stopPropagation(); // Stop event bubbling

                const $this = $(this);
                const tableType = $this.data('table');
                console.log($this.data('table'))
                const targetId = $this.data('target');

                // Show the target tab
                $('.tab-pane').removeClass('show active');
                $(targetId).addClass('show active');

                // Update active state of tabs
                $('.payroll-nav-link').removeClass('active');
                $this.addClass('active');

                // Initialize DataTable based on type if not already initialized
                switch (tableType) {
                    case 'deductions':
                        if (!$.fn.DataTable.isDataTable('#deductions-table')) {
                            @include('hr.employee.salary.deduction.index_js')
                        }
                        break;
                    case 'loan':
                        if (!$.fn.DataTable.isDataTable('#loan-table')) {
                            @include('hr.employee.salary.loan.index_js')
                        }
                        break;
                    case 'others':
                        if (!$.fn.DataTable.isDataTable('#others-table')) {
                            @include('hr.employee.salary.other_payment.index_js')
                        }
                        break;
                    case 'overtime':
                        if (!$.fn.DataTable.isDataTable('#overtime-table')) {
                            @include('hr.employee.salary.overtime.index_js')
                        }
                        break;
                    case 'payslip':
                        if (!$.fn.DataTable.isDataTable('#payslip-table')) {
                            @include('hr.employee.payslip.index_js')
                        }
                        break;
                    case 'pension':
                        if (!$.fn.DataTable.isDataTable('#pension-table')) {
                            @include('hr.employee.salary.pension.pension_amount_js')
                        }
                        break;
                    case 'travel':
                        if (!$.fn.DataTable.isDataTable('#travel_type-table')) {
                            @include('hr.settings.variables.JS_DT.travel_method_js')
                        }
                        break;
                    case 'expense':
                        if (!$.fn.DataTable.isDataTable('#expense_type-table')) {
                            @include('hr.settings.variables.JS_DT.expense_type_js')
                        }
                        break;
                    case 'status':
                        if (!$.fn.DataTable.isDataTable('#status_type-table')) {
                            @include('hr.settings.variables.JS_DT.status_type_js')
                        }
                        break;
                    case 'document':
                        if (!$.fn.DataTable.isDataTable('#document_type-table')) {
                            @include('hr.settings.variables.JS_DT.document_type_js')
                        }
                        break;
                    case 'company_type':
                        if (!$.fn.DataTable.isDataTable('#company_type-table')) {
                            @include('hr.settings.variables.JS_DT.company_type_js')
                        }
                        break;
                    case 'relation_type':
                        if (!$.fn.DataTable.isDataTable('#relation_type-table')) {
                            @include('hr.settings.variables.JS_DT.relation_type_js')
                        }
                        break;
                    case 'commissions':
                        if (!$.fn.DataTable.isDataTable('#commissions-table')) {
                            @include('hr.employee.salary.commission.index_js')
                        }
                        break;
                    case 'salary_allowance':
                        if (!$.fn.DataTable.isDataTable('#salary_allowance-table')) {
                            @include('hr.employee.salary.allowance.index_js')
                        }
                        break;
                    case 'deposit_category':
                        if (!$.fn.DataTable.isDataTable('#deposit_category-table')) {
                            @include('hr.settings.variables.JS_DT.deposit_category_js')
                        }
                        break;
                    case 'job_experience':
                        if (!$.fn.DataTable.isDataTable('#job_experience-table')) {
                            @include('hr.settings.variables.JS_DT.job_experience_js')
                        }
                        break;
                }
            });

        })(jQuery);
    </script>
@endsection