@extends('admin.layouts.layouts')

@section('title', 'Employee CTC')

@section('content')
   <div class="page-header">
        <h3 class="page-title">{{ $employeeDetail->employee_name }} CTC</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('employee-master.index') }}">Employee Master</a></li>
                <li class="breadcrumb-item" aria-current="page">{{ $employeeDetail->employee_name }} CTC</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('employee-ctc.update', $employeeDetail->id) }}" id="employeeCTCForm">
            @csrf
            <input type="hidden" name="employee_master_id" id="employee_master_id" value="{{ $employeeDetail->id ?? '' }}">
            <input type="hidden" name="id" id="id" value="{{ $currentEmployeeCTC?->id ?? '' }}">

            <div class="card-body">

                <div id="leave-type-fields">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="effective_date" class="form-label">Effective From <span class="text-danger">*</span></label>
                            <input type="month" class="form-control" id="effective_date" name="effective_date"
                            value="{{ old('effective_date', isset($currentEmployeeCTC?->effective_date) ? date('Y-m', strtotime($currentEmployeeCTC?->effective_date)) : '') }}"
                            required data-parsley-required data-parsley-required-message="Please select effective from"
                            data-parsley-errors-container='#effective_date_error'>
                            <span class="text-danger" id="effective_date_error"></span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-4"><strong></strong></div>
                        <div class="col-md-4"><strong></strong></div>
                        <div class="col-md-4"><strong></strong></div>
                    </div>

                    <!-- CTC to Offer -->
                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label mt-3">CTC To Offer <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="ctc_to_offer" name="ctc_to_offer"
                                value="{{ old('ctc_to_offer', $currentEmployeeCTC?->ctc_to_offer ?? '') }}" required
                                data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter ctc to offer" data-parsley-errors-container='#ctc_to_offer_error'>
                            <span class="text-danger" id="ctc_to_offer_error">{{ $errors->first('ctc_to_offer') }}</span>
                        </div>
                    </div>

                    <!-- ABC (2% increase in CTC) -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label"></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle ctc-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="ctc_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item ctc-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item ctc-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="ctc_type_value" name="ctc_type_value"
                                        value="{{ old('ctc_type_value', ($currentEmployeeCTC?->ctc_type_value ? $currentEmployeeCTC?->ctc_type_value : 0)) }}">
                                </div>
                                <input type="hidden" id="ctc_type" name="ctc_type" value="{{ old('ctc_type', $currentEmployeeCTC?->ctc_type ?? 'percentage') }}">
                            </div>
                            <span class="text-danger" id="ctc_percentage_error">{{ $errors->first('ctc_percentage') }}</span>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="ctc_amount" name="ctc_amount"
                                value="{{ old('ctc_amount', $currentEmployeeCTC?->ctc_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter ctc amount" data-parsley-errors-container='#ctc_amount_error'>
                            <span class="text-danger" id="ctc_amount_error">{{ $errors->first('ctc_amount') }}</span>
                        </div>
                    </div>

                    <!-- Variable Pay -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Variable Pay <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle variable-pay-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="variable_pay_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item variable-pay-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item variable-pay-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="variable_pay_type_value" name="variable_pay_type_value"
                                        value="{{ old('variable_pay_type_value', ($currentEmployeeCTC?->variable_pay_type_value ? $currentEmployeeCTC?->variable_pay_type_value : $currentCTC->variable_pay)) }}">
                                </div>
                                <span class="text-danger" id="variable_pay_type_value_error">{{ $errors->first('variable_pay_type_value') }}</span>
                                <input type="hidden" id="variable_pay_type" name="variable_pay_type" value="{{ old('variable_pay_type', $currentEmployeeCTC?->variable_pay_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="variable_pay_amount" name="variable_pay_amount"
                                value="{{ old('variable_pay_amount', $currentEmployeeCTC?->variable_pay_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter variable pay amount" data-parsley-errors-container='#variable_pay_amount_error'>
                            <span class="text-danger" id="variable_pay_amount_error">{{ $errors->first('variable_pay_amount') }}</span>
                        </div>
                    </div>

                    <!-- Balance -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Balance <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="balance_amount" name="balance_amount"
                                value="{{ old('balance_amount', $currentEmployeeCTC?->balance_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter balance amount" data-parsley-errors-container='#balance_amount_error'>
                            <span class="text-danger" id="balance_amount_error">{{ $errors->first('balance_amount') }}</span>
                        </div>
                    </div>

                    <!-- Basic Year -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Basic Year <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle basic-year-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="basic_year_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item basic-year-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item basic-year-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="basic_year_type_value" name="basic_year_type_value"
                                        value="{{ old('basic_year_type_value', ($currentEmployeeCTC?->basic_year_type_value ? $currentEmployeeCTC?->basic_year_type_value : $currentCTC->basic)) }}">
                                </div>
                                <input type="hidden" id="basic_year_type" name="basic_year_type" value="{{ old('basic_year_type', $currentEmployeeCTC?->basic_year_type ?? 'percentage') }}">
                                <span class="text-danger" id="basic_year_type_value_error">{{ $errors->first('basic_year_type_value') }}</span>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="basic_year_amount" name="basic_year_amount"
                                value="{{ old('basic_year_amount', $currentEmployeeCTC?->basic_year_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter basic year amount" data-parsley-errors-container='#basic_year_amount_error'>
                            <span class="text-danger" id="basic_year_amount_error">{{ $errors->first('basic_year_amount') }}</span>
                        </div>
                    </div>

                    <!-- Basic Month -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Basic Month <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="basic_month_amount" name="basic_month_amount"
                                value="{{ old('basic_month_amount', $currentEmployeeCTC?->basic_month_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter basic month amount" data-parsley-errors-container='#basic_month_amount_error'>
                            <span class="text-danger" id="basic_month_amount_error">{{ $errors->first('basic_month_amount') }}</span>
                        </div>
                    </div>

                    <!-- Medical -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Medical <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="medical_amount" name="medical_amount"
                                value="{{ old('medical_amount', $currentEmployeeCTC?->medical_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter medical amount" data-parsley-errors-container='#medical_amount_error'>
                            <span class="text-danger" id="medical_amount_error">{{ $errors->first('medical_amount') }}</span>
                        </div>
                    </div>

                    <!-- PT -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">PT <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="pt_amount" name="pt_amount"
                                value="{{ old('pt_amount', $currentEmployeeCTC?->pt_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter pt amount" data-parsley-errors-container='#pt_amount_error'>
                            <span class="text-danger" id="pt_amount_error">{{ $errors->first('pt_amount') }}</span>
                        </div>
                    </div>

                    <!-- Employee PF -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Employee PF <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle employee-pf-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="employee_pf_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item employee-pf-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item employee-pf-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="employee_pf_type_value" name="employee_pf_type_value"
                                        value="{{ old('employee_pf_type_value', ($currentEmployeeCTC?->employee_pf_type_value ? $currentEmployeeCTC?->employee_pf_type_value : ($currentCTC?->employee_pf ?? ''))) }}">
                                </div>
                                <span class="text-danger" id="employee_pf_type_value_error">{{ $errors->first('employee_pf_type_value') }}</span>
                                <input type="hidden" id="employee_pf_type" name="employee_pf_type" value="{{ old('employee_pf_type', $currentEmployeeCTC?->employee_pf_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="employee_pf_amount" name="employee_pf_amount"
                                value="{{ old('employee_pf_amount', $currentEmployeeCTC?->employee_pf_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter pf amount" data-parsley-errors-container='#employee_pf_amount_error'>
                            <span class="text-danger" id="employee_pf_amount_error">{{ $errors->first('employee_pf_amount') }}</span>
                        </div>
                    </div>
                    
                    <!-- ESIC -->
                    <div class="esicDiv" style="display: none;">
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label class="form-label mt-3">ESIC <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" class="form-control percentage" name="esic_percentage" id="esic_percentage" value="{{ old('esic_percentage', ($currentEmployeeCTC?->esic_percentage ? $currentEmployeeCTC?->esic_percentage : $currentCTC->esic)) }}">
                                        <div class="input-group-append">
                                            <span class="input-group-text bg-primary text-white">%</span>
                                        </div>
                                    </div>
                                    <span class="text-danger" id="esic_percentage_error">{{ $errors->first('esic_percentage') }}</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control amount" id="esic_amount" name="esic_amount"
                                    value="{{ old('esic_amount', $currentEmployeeCTC?->esic_amount ?? '') }}" data-parsley-required
                                    data-parsley-trigger='keyup' data-parsley-required-message="Please enter ESIC amount" data-parsley-errors-container='#esic_amount_error'>
                                <span class="text-danger" id="esic_amount_error">{{ $errors->first('esic_amount') }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- HRA -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">HRA <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle hra-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="hra_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item hra-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item hra-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="hra_type_value" name="hra_type_value"
                                        value="{{ old('hra_type_value', ($currentEmployeeCTC?->hra_type_value ? $currentEmployeeCTC?->hra_type_value : ($currentCTC?->hra ?? ''))) }}">
                                </div>
                                <span class="text-danger" id="hra_type_value_error">{{ $errors->first('hra_type_value') }}</span>
                                <input type="hidden" id="hra_type" name="hra_type" value="{{ old('hra_type', $currentEmployeeCTC?->hra_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="hra_amount" name="hra_amount"
                                value="{{ old('hra_amount', $currentEmployeeCTC?->hra_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter hra amount" data-parsley-errors-container='#hra_amount_error'>
                            <span class="text-danger" id="hra_amount_error">{{ $errors->first('hra_amount') }}</span>
                        </div>
                    </div>

                    <!-- Gratuity -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Gratuity <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle gratuity-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="gratuity_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item gratuity-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item gratuity-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="gratuity_type_value" name="gratuity_type_value"
                                        value="{{ old('gratuity_type_value', ($currentEmployeeCTC?->gratuity_type_value ? $currentEmployeeCTC?->gratuity_type_value : ($currentCTC?->gratuity ?? ''))) }}">
                                </div>
                                <span class="text-danger" id="gratuity_type_value_error">{{ $errors->first('gratuity_type_value') }}</span>
                                <input type="hidden" id="gratuity_type" name="gratuity_type" value="{{ old('gratuity_type', $currentEmployeeCTC?->gratuity_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="gratuity_amount" name="gratuity_amount"
                                value="{{ old('gratuity_amount', $currentEmployeeCTC?->gratuity_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter gratuity amount" data-parsley-errors-container='#gratuity_amount_error'>
                            <span class="text-danger" id="gratuity_amount_error">{{ $errors->first('gratuity_amount') }}</span>
                        </div>
                    </div>

                    <!-- Employer PF -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Employer PF <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle employer-pf-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="employer_pf_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item employer-pf-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item employer-pf-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="employer_pf_type_value" name="employer_pf_type_value"
                                        value="{{ old('employer_pf_type_value', ($currentEmployeeCTC?->employer_pf_type_value ? $currentEmployeeCTC?->employer_pf_type_value : ($currentCTC?->employer_pf ?? ''))) }}">
                                </div>
                                <span class="text-danger" id="employer_pf_type_value_error">{{ $errors->first('employer_pf_type_value') }}</span>
                                <input type="hidden" id="employer_pf_type" name="employer_pf_type" value="{{ old('employer_pf_type', $currentEmployeeCTC?->employer_pf_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="employer_pf_amount" name="employer_pf_amount"
                                value="{{ old('employer_pf_amount', $currentEmployeeCTC?->employer_pf_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter pf calculated amount" data-parsley-errors-container='#employer_pf_amount_error'>
                            <span class="text-danger" id="employer_pf_amount_error">{{ $errors->first('employer_pf_amount') }}</span>
                        </div>
                    </div>

                    <!-- Total -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Total <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="total_amount" name="total_amount"
                                value="{{ old('total_amount', $currentEmployeeCTC?->total_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter total amount" data-parsley-errors-container='#total_amount_error'>
                            <span class="text-danger" id="total_amount_error">{{ $errors->first('total_amount') }}</span>
                        </div>
                    </div>

                    <!-- Special All -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Special All <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="special_all" name="special_all"
                                value="{{ old('special_all', $currentEmployeeCTC?->special_all ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter special all" data-parsley-errors-container='#special_all_error'>
                            <span class="text-danger" id="special_all_error">{{ $errors->first('special_all') }}</span>
                        </div>
                    </div>

                    <!-- Annual Package -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Annual Package <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="annual_package" name="annual_package"
                                value="{{ old('annual_package', $currentEmployeeCTC?->annual_package ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter annual package" data-parsley-errors-container='#annual_package_error'>
                            <span class="text-danger" id="annual_package_error">{{ $errors->first('annual_package') }}</span>
                        </div>
                    </div>

                    <!-- VIP (Monthly Amount) -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">VIP (Monthly Amount) <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="vip_monthly_amount" name="vip_monthly_amount"
                                value="{{ old('vip_monthly_amount', $currentEmployeeCTC?->vip_monthly_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter vip monthly amount" data-parsley-errors-container='#vip_monthly_amount_error'>
                            <span class="text-danger" id="vip_monthly_amount_error">{{ $errors->first('vip_monthly_amount') }}</span>
                        </div>
                    </div>

                    <!-- SIP Amount -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">SIP Amount <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-sm btn-outline-primary dropdown-toggle sip-dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="sip_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item sip-option" href="#" data-type="percentage">Percentage</a>
                                            <a class="dropdown-item sip-option" href="#" data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="sip_type_value" name="sip_type_value"
                                        value="{{ old('sip_type_value', ($currentEmployeeCTC?->sip_type_value ? $currentEmployeeCTC?->sip_type_value : ($currentCTC?->sip ?? ''))) }}">
                                </div>
                                <span class="text-danger" id="sip_type_value_error">{{ $errors->first('sip_type_value') }}</span>
                                <input type="hidden" id="sip_type" name="sip_type" value="{{ old('sip_type', $currentEmployeeCTC?->sip_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="sip_amount" name="sip_amount"
                                value="{{ old('sip_amount', $currentEmployeeCTC?->sip_amount ?? '') }}" data-parsley-required
                                data-parsley-trigger='keyup' data-parsley-required-message="Please enter sip amount" data-parsley-errors-container='#sip_amount_error'>
                            <span class="text-danger" id="sip_amount_error">{{ $errors->first('sip_amount') }}</span>
                        </div>
                    </div>

                    <!-- Monathly Salary -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Monthly Salary <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="monthlySalary" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary" id="updateEmployeeCTC">Update</button>
            </div>
        </form>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">{{ $employeeDetail->employee_name }} CTC History</h5>
            </div>
            <div class="card-body">
                @if($employeeCTCs->isEmpty())
                    <p style="text-align: center; font-weight: bold;">No CTC found.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="employeeCTCTable">
                            <thead>
                                <tr>
                                    <th>Effective Month</th>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Updated At</th>
                                    <th>Updated By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($employeeCTCs as $employeeCTC)
                                    <tr>
                                        <td>{{ date('F, Y', strtotime($employeeCTC->effective_date)) }}</td>
                                        <td>{{ $employeeCTC->created_at->format('d-m-Y') }}</td>
                                        <td>{{ $employeeCTC->creator->name }}</td>
                                        <td>{{ isset($employeeCTC->updated_by) ? $employeeCTC->updated_at->format('d-m-Y') : '-' }}</td>
                                        <td>{{ isset($employeeCTC->updated_by) ? $employeeCTC->editor->name : '-' }}</td>
                                        <td>
                                            <a href="{{ route('employee-ctc.show', $employeeCTC->id) }}" class="btn btn-icon btn-dark">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var employeeMasterList = "{{ route('employee-master.index') }}";
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            updateDropdownLabels();

            function updateDropdownLabels() {
                // Update all dropdown labels and input validation
                const types = [
                    { id: 'ctc', label: 'ctc_dropdown_label', input: 'ctc_type_value' },
                    { id: 'variable_pay', label: 'variable_pay_dropdown_label', input: 'variable_pay_type_value' },
                    { id: 'basic_year', label: 'basic_year_dropdown_label', input: 'basic_year_type_value' },
                    { id: 'hra', label: 'hra_dropdown_label', input: 'hra_type_value' },
                    { id: 'gratuity', label: 'gratuity_dropdown_label', input: 'gratuity_type_value' },
                    { id: 'employee_pf', label: 'employee_pf_dropdown_label', input: 'employee_pf_type_value' },
                    { id: 'employer_pf', label: 'employer_pf_dropdown_label', input: 'employer_pf_type_value' },
                    { id: 'sip', label: 'sip_dropdown_label', input: 'sip_type_value' }
                ];

                types.forEach(type => {
                    const currentType = $(`#${type.id}_type`).val();
                    $(`#${type.label}`).text(currentType === 'percentage' ? 'Percentage' : 'Fixed');
                    
                    const inputElement = $(`#${type.input}`);
                    
                    if (currentType === 'percentage') {
                        inputElement
                            .removeClass('amount')
                            .addClass('percentage')
                            .attr('data-parsley-max', '100')
                            .attr('data-parsley-errors-container', `#${type.input}_error`);

                        let currentValue = inputElement.val();
                        if (currentValue !== '') {
                            let numericValue = parseFloat(currentValue);
                            if (!isNaN(numericValue) && numericValue % 1 === 0) {
                                inputElement.val(parseInt(numericValue, 10));
                            }
                        }
                    } else {
                        inputElement
                            .addClass('amount')
                            .removeAttr('data-parsley-type')
                            .removeAttr('data-parsley-max')
                            .removeAttr('data-parsley-errors-container');
                    }
                });
            }

            function roundValue(value) {
                return Math.round(value);
            }

            function sanitizePercentageInput(inputElement) {
                let value = $(inputElement).val();
                if (!$(inputElement).hasClass('amount')) {
                    value = value.replace(/[^0-9]/g, '');
                    // Limit to max 100
                    if (parseInt(value) > 100) {
                        // value = '100';
                    }
                    // Limit to 3 digits (0-100)
                    if (value.length > 3) {
                        value = value.substring(0, 3);
                    }
                    $(inputElement).val(value);
                }
                return value;
            }

            function calculateCTC() {
                const ctc = parseFloat($('#ctc_to_offer').val()) || 0;
                const ctcType = $('#ctc_type').val();
                const ctcInput = parseFloat($('#ctc_type_value').val()) || 0;
                
                const varPayType = $('#variable_pay_type').val();
                const varPayInput = parseFloat($('#variable_pay_type_value').val()) || 0;
                
                const basicYearType = $('#basic_year_type').val();
                const basicYearInput = parseFloat($('#basic_year_type_value').val()) || 0;
                
                const hraType = $('#hra_type').val();
                const hraInput = parseFloat($('#hra_type_value').val()) || 0;
                
                const gratuityType = $('#gratuity_type').val();
                const gratuityInput = parseFloat($('#gratuity_type_value').val()) || 0;
                
                const employeePFType = $('#employee_pf_type').val();
                const employeePFInput = parseFloat($('#employee_pf_type_value').val()) || 0;
                
                const employerPFType = $('#employer_pf_type').val();
                const employerPFInput = parseFloat($('#employer_pf_type_value').val()) || 0;
                
                const sipType = $('#sip_type').val();
                const sipInput = parseFloat($('#sip_type_value').val()) || 0;
                
                const medical = parseFloat($('#medical_amount').val()) || 0;
                const pt = parseFloat($('#pt_amount').val()) || 0;

                // Step 1: ABC (CTC + percentage/fixed)
                const abcAmount = ctcType === 'percentage' 
                    ? ctc + (ctc * ctcInput / 100)
                    : ctc + ctcInput;
                $('#ctc_amount').val(abcAmount.toFixed(2));

                // Step 2: Variable Pay (handle both percentage and fixed)
                let variablePayAmount = varPayType === 'percentage'
                    ? abcAmount * varPayInput / 100
                    : varPayInput * 12;
                $('#variable_pay_amount').val(variablePayAmount.toFixed(2));

                // Step 3: Balance
                const balanceAmount = abcAmount - variablePayAmount;
                $('#balance_amount').val(balanceAmount.toFixed(2));

                // Step 4: Basic Year (handle both percentage and fixed)
                let basicYearAmount = basicYearType === 'percentage'
                    ? balanceAmount * basicYearInput / 100
                    : basicYearInput * 12;
                $('#basic_year_amount').val(basicYearAmount.toFixed(2));

                // Step 5: Basic Month
                const basicMonthAmount = basicYearAmount / 12;
                $('#basic_month_amount').val(basicMonthAmount.toFixed(2));

                // Step 5.5: Show/hide ESIC based on basic month amount
                const monthlyGrossAmount = balanceAmount / 12;
                
                const esicDiv = $('.esicDiv');
                if (monthlyGrossAmount <= 21000) {
                    esicDiv.show();
                    
                    // Add Parsley validation when showing
                    $('#esic_percentage').attr('required', 'required')
                        .attr('data-parsley-required', 'true')
                        .attr('data-parsley-max', '100')
                        .attr('data-parsley-errors-container', '#esic_percentage_error');
                    
                    $('#esic_amount').attr('required', 'required')
                        .attr('data-parsley-required', 'true')
                        .attr('data-parsley-errors-container', '#esic_amount_error');

                    // Calculate ESIC from basic year amount
                    const esicPercentage = parseFloat($('#esic_percentage').val()) || 0;
                    const esicAmount = balanceAmount * (esicPercentage / 100);
                    $('#esic_amount').val(esicAmount.toFixed(2));
                } else {
                    esicDiv.hide();
                    $('#esic_amount').val('0');
                    
                    // Remove Parsley validation when hiding
                    $('#esic_percentage').removeAttr('required')
                        .removeAttr('data-parsley-required')
                        .removeAttr('data-parsley-type')
                        .removeAttr('data-parsley-max')
                        .removeAttr('data-parsley-errors-container');
                    
                    $('#esic_amount').removeAttr('required')
                        .removeAttr('data-parsley-required')
                        .removeAttr('data-parsley-errors-container');
                }

                // set default 0 Medical
                $('#medical_amount').val(medical);

                // PT set default 200 * 12
                const ptAmount = 200 * 12;
                $('#pt_amount').val(ptAmount.toFixed(2));

                // Step 6: HRA (handle both percentage and fixed)
                const hraAmount = hraType === 'percentage'
                    ? basicMonthAmount * 12 * (hraInput / 100)
                    : hraInput * 12;
                $('#hra_amount').val(hraAmount.toFixed(2));

                // Step 7: Gratuity (handle both percentage and fixed)
                const gratuityAmount = gratuityType === 'percentage'
                    ? basicMonthAmount * (gratuityInput / 100) * 12
                    : gratuityInput * 12;
                $('#gratuity_amount').val(gratuityAmount.toFixed(2));

                // Step 8: Employee PF
                const employeePFAmount = employeePFType === 'percentage'
                    ? basicMonthAmount * 12 * (employeePFInput / 100)
                    : employeePFInput * 12;
                $('#employee_pf_amount').val(employeePFAmount.toFixed(2));

                // Step 9: Employer PF
                const employerPFAmount = employerPFType === 'percentage'
                    ? basicMonthAmount * 12 * (employerPFInput / 100)
                    : employerPFInput * 12;
                $('#employer_pf_amount').val(employerPFAmount.toFixed(2));

                // Step 10: SIP
                const sipAmount = sipType === 'percentage'
                    ? variablePayAmount * (sipInput / 100)
                    : sipInput * 12;
                $('#sip_amount').val(sipAmount.toFixed(2));

                
                // Step 11: Total (add all amounts)
                const esicAmount = esicDiv.is(':visible') ? parseFloat($('#esic_amount').val()) || 0 : 0;
                const totalAmount = basicYearAmount + hraAmount + gratuityAmount +
                    employeePFAmount + medical + ptAmount + esicAmount;
                // + employerPFAmount
                $('#total_amount').val(totalAmount.toFixed(2));

                // Step 12: Special All (ABC - total calculated)
                const specialAll = (balanceAmount - totalAmount) / 12;
                $('#special_all').val(specialAll.toFixed(2));

                // Step 13: Annual Package
                const annualPackage = abcAmount + employeePFAmount + sipAmount;
                $('#annual_package').val(annualPackage.toFixed(2));

                // Step 14: VIP Monthly Amount (optional calculation if needed)
                // const vipMonthly = annualPackage / 12; // old
                const vipMonthly = variablePayAmount / 12;
                $('#vip_monthly_amount').val(vipMonthly.toFixed(2));
                
                const totalGrossSalaryYearly = (monthlyGrossAmount * 12) + employerPFAmount;
                const totalGrossSalaryMonthly = totalGrossSalaryYearly / 12;
                const monthlySalary = totalGrossSalaryMonthly + (variablePayAmount / 12) + (sipAmount / 12);
                $('#monthlySalary').val(roundValue(monthlySalary).toFixed(2));
            }

            $(document).on('input change', '#ctc_to_offer, #ctc_type_value, #variable_pay_type_value, #basic_year_type_value, #hra_type_value, #gratuity_type_value, #employee_pf_type_value, #employer_pf_type_value, #sip_type_value, #medical_amount, #pt_amount, #esic_percentage', function () {
                calculateCTC();
            });
            
            $(document).on('click', '.ctc-option, .variable-pay-option, .basic-year-option, .hra-option, .gratuity-option, .employee-pf-option, .employer-pf-option, .sip-option', function (e) {
                e.preventDefault();
                
                // Get the parent dropdown menu
                const dropdownMenu = $(this).closest('.dropdown-menu');
                // Get the dropdown toggle button
                const dropdownToggle = dropdownMenu.prev('.dropdown-toggle');
                
                let typeId = '';
                
                if (dropdownToggle.hasClass('ctc-dropdown')) typeId = 'ctc';
                else if (dropdownToggle.hasClass('variable-pay-dropdown')) typeId = 'variable_pay';
                else if (dropdownToggle.hasClass('basic-year-dropdown')) typeId = 'basic_year';
                else if (dropdownToggle.hasClass('hra-dropdown')) typeId = 'hra';
                else if (dropdownToggle.hasClass('gratuity-dropdown')) typeId = 'gratuity';
                else if (dropdownToggle.hasClass('employee-pf-dropdown')) typeId = 'employee_pf';
                else if (dropdownToggle.hasClass('employer-pf-dropdown')) typeId = 'employer_pf';
                else if (dropdownToggle.hasClass('sip-dropdown')) typeId = 'sip';
                
                if (typeId) {
                    const selectedType = $(this).data('type');
                    $(`#${typeId}_type`).val(selectedType);
                    updateDropdownLabels();
                    sanitizePercentageInput($(`#${typeId}_type_value`));
                    calculateCTC();
                }
                
                // Close the dropdown by removing the 'show' class
                dropdownMenu.removeClass('show');
                dropdownToggle.attr('aria-expanded', 'false');
                
                // Also close any other open dropdowns
                $('.dropdown-menu').removeClass('show');
                $('.dropdown-toggle').attr('aria-expanded', 'false');
            });

            // Auto-trigger on input
            $('#leave-type-fields input').on('input', function () {
                calculateCTC();
            });

            // Trigger once on load
            calculateCTC();

            $('#employeeCTCTable').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "columnDefs": [
                    { orderable: false, targets: '_all' },
                ]
            });

            $("#employeeCTCForm").parsley();
            $('#employeeCTCForm').on('submit', function(e) {
                e.preventDefault();

                if ($("#employeeCTCForm").parsley().isValid()) {
                    // Get the form data
                    let formData = new FormData(this);
                    let url = $(this).attr('action');
                    let method = $(this).attr('method');

                    // Show loading indicator
                    $('#updateEmployeeCTC').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');

                    $.ajax({
                        url: url,
                        type: method,
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            // Handle success data
                            if(data.success) {
                                toastr.success(data.message);
                                setTimeout(function() {
                                    // window.location.href = employeeMasterList;
                                    window.location.reload();
                                }, 3000);
                            } else {
                                toastr.error(data.message);
                            }
                        },
                         error: function (response) {
                            $('.text-danger').text('');
                            $.each(response.responseJSON.errors, function(field, messages) {
                                $('#'+field+'_error').text(messages[0]);
                            });
                        },
                        // error: function(xhr) {
                        //     // Handle validation errors
                        //     if(xhr.status === 422) {
                        //         let errors = xhr.responseJSON.errors;
                        //         let errorMessages = '';

                        //         $.each(errors, function(key, value) {
                        //             errorMessages += value[0] + '<br>';
                        //         });

                        //         toastr.error(errorMessages);
                        //     } else {
                        //         toastr.error('An error occurred. Please try again.');
                        //     }
                        // },
                        complete: function() {
                            // Re-enable the button
                            $('#updateEmployeeCTC').prop('disabled', false).html('Update');
                        }
                    });
                } else {
                    return false;
                }
            });
        });
    </script>
@endsection