@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="nav-link" href="{{route('leave_type.index')}}" id="Leave_type-tab" data-toggle="tab" data-table= "leave" data-target="#Leave_type" role="tab" aria-controls="Leave_type" aria-selected="true">
                                        <h3 class="stepper-title">Leave Type</h3>
                                        <div class="stepper-desc fw-bold">Setup Leave Type</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="nav-link " href="#" id="Deduction_type-tab" data-toggle="tab" data-table="deduction_type" data-target="#Deduction_type" role="tab" aria-controls="Deduction_type" aria-selected="false">
                                        <h3 class="stepper-title">Deduction Type</h3>
                                        <div class="stepper-desc fw-bold">Setup Deduction Type</div>
                                    </a>

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

                            <!--begin::Step 3-->
                            <div class="stepper-item {{ request()->is('hrm/employee/contact-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="nav-link " href="#" id="Loan_type-tab" data-toggle="tab" data-table="loan_type" data-target="#Loan_type" role="tab" aria-controls="Loan_type" aria-selected="false">
                                        <h3 class="stepper-title">Loan Type</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Loan Type</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="nav-link " href="{{route('award_type.index')}}" id="Award_type-tab" data-toggle="tab" data-table= "award" data-target="#Award_type" role="tab" aria-controls="Award_type" aria-selected="false">
                                        <h3 class="stepper-title">Award Type</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Award Type</div>
                                    </a>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Step 4-->

                            <!--begin::Step 5-->
                            <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">5</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <a class="nav-link" href="{{route('warning_type.index')}}" id="Warning_type-tab" data-toggle="tab" data-table= "warning" data-target="#Warning_type" role="tab" aria-controls="Warning_type" aria-selected="false">
                                        <h3 class="stepper-title">Warning type</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Warning type</div>
                                    </a>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--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="nav-link" href="{{route('termination_type.index')}}" id="Termination_type-tab" data-toggle="tab" data-table= "termination" data-target="#Termination_type" role="tab" aria-controls="Termination_type" aria-selected="false">
                                        <h3 class="stepper-title">Termination type</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Termination type</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">7</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                              
                                <div class="stepper-label">
                                    <a class="nav-link" href="{{route('travel_method.index')}}" id="Travel_type-tab" data-toggle="tab" data-table= "travel" data-target="#Travel_type" role="tab" aria-controls="Travel_type" aria-selected="false">
                                        <h3 class="stepper-title">Travel Arrangement Type</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Travel Arrangement Type</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">8</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <a class="nav-link" href="#" id="Indicator-tab" data-toggle="tab" data-table="indicatorTable" data-target="#Indicator" role="tab" aria-controls="Indicator" aria-selected="true">
                                        <h3 class="stepper-title">Appraisal Indicator</h3>
                                        <div class="stepper-desc fw-bold">Setup Your Appraisal Indicator</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="Leave_type" role="tab" aria-labelledby="Leave_type-tab">
                        @include('hr.settings.variables.partials.leave_type')
                        </div>
                        <div class="pt-0 tab-pane fade " id="Deduction_type" role="tab"  aria-labelledby="Deduction_type-tab">
                        @include('hr.settings.variables.partials.deduction_type')
                        </div>
                        <div class="pt-0 tab-pane fade " id="Loan_type" role="tab"  aria-labelledby="Loan_type-tab">
                        @include('hr.settings.variables.partials.loan_type')
                        </div>
                        <div class="pt-0 tab-pane fade " id="Award_type" role="tab"  aria-labelledby="Award_type-tab">
                        @include('hr.settings.variables.partials.award_type')
                        </div>
                        <div class="pt-0 tab-pane fade " id="Warning_type" role="tab"  aria-labelledby="Warning_type-tab">
                         @include('hr.settings.variables.partials.warning_type')
                         </div>

                         <div class="pt-0 tab-pane fade " id="Termination_type" role="tab"  aria-labelledby="Termination_type-tab">
                         @include('hr.settings.variables.partials.termination_type')
                         </div>

                        <div class="pt-0 tab-pane fade " id="Travel_type" role="tab"  aria-labelledby="Travel_type-tab">
                         @include('hr.settings.variables.partials.travel_method')
                        </div>

                        <div class="pt-0 tab-pane fade" id="Indicator" role="tab" aria-labelledby="Indicator-tab">
                        @include('hr.settings.variables.partials.indicator.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.settings.variables.JS_DT.leave_type_js')
                leaveLoad = 1;
            }
        });

        // Handle tab clicks
        $('.nav-link').on('click', function(e) {
            e.preventDefault(); // Prevent navigation
            e.stopPropagation(); // Stop event bubbling
            
            const $this = $(this);
            const tableType = $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
            $('.nav-link').removeClass('active');
            $this.addClass('active');

            // Initialize DataTable based on type if not already initialized
            switch(tableType) {
                case 'award':
                    if (!$.fn.DataTable.isDataTable('#award_type-table')) {
                        @include('hr.settings.variables.JS_DT.award_type_js')
                    }
                    break;
                case 'warning':
                    if (!$.fn.DataTable.isDataTable('#warning_type-table')) {
                        @include('hr.settings.variables.JS_DT.warning_type_js')
                    }
                    break;
                case 'termination':
                    if (!$.fn.DataTable.isDataTable('#termination_type-table')) {
                        @include('hr.settings.variables.JS_DT.termination_type_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 'indicatorTable':
                    if (!$.fn.DataTable.isDataTable('#indicatorTable-table')) {
                        @include('hr.settings.variables.JS_DT.indicator_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 'loan_type':
                    if (!$.fn.DataTable.isDataTable('#loan_type-table')) {
                        @include('hr.settings.variables.JS_DT.loan_type_js')
                    }
                    break;
                case 'deduction_type':
                    if (!$.fn.DataTable.isDataTable('#deduction_type-table')) {
                        @include('hr.settings.variables.JS_DT.deduction_type_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