@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>

                    {{-- Local Conveyance Amount --}}
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Local Conveyance</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 local-conveyance-dropdown"
                                            type="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false" id="local_conveyance_dropdown_label">Percentage</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item local-conveyance-option" href="#"
                                                data-type="percentage">Percentage</a>
                                            <a class="dropdown-item local-conveyance-option" href="#"
                                                data-type="fixed">Fixed</a>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="local_conveyance_type_value"
                                        name="local_conveyance_type_value"
                                        value="{{ old('local_conveyance_type_value', $currentEmployeeCTC?->local_conveyance_type_value ? $currentEmployeeCTC?->local_conveyance_type_value : '') }}">
                                </div>
                                <span class="text-danger"
                                    id="local_conveyance_type_value_error">{{ $errors->first('local_conveyance_type_value') }}</span>
                                <input type="hidden" id="local_conveyance_type" name="local_conveyance_type"
                                    value="{{ old('local_conveyance_type', $currentEmployeeCTC?->local_conveyance_type ?? 'percentage') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control amount" id="local_conveyance_amount"
                                name="local_conveyance_amount"
                                value="{{ old('local_conveyance_amount', $currentEmployeeCTC?->local_conveyance_amount ?? '') }}"
                                data-parsley-trigger='keyup'
                                data-parsley-errors-container='#local_conveyance_amount_error'>
                            <span class="text-danger"
                                id="local_conveyance_amount_error">{{ $errors->first('local_conveyance_amount') }}</span>
                        </div>
                    </div>

                    {{-- Monthly CTC --}}
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label class="form-label mt-3">Monthly CTC <span class="text-danger">*</span></label>
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="text" name="monthly_ctc" class="form-control amount" id="monthlyCTC"
                                readonly>
                        </div>
                    </div>

                    {{-- Monthly 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" name="monthly_salary" 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'
                    },
                    {
                        id: 'local_conveyance',
                        label: 'local_conveyance_dropdown_label',
                        input: 'local_conveyance_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
                            .removeClass('percentage')
                            .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 localConveyanceType = $('#local_conveyance_type').val();
                const localConveyanceInput = parseFloat($('#local_conveyance_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));

                // Step 15: Local Conveyance
                const localConveyanceAmount = localConveyanceType === 'percentage' ?
                    variablePayAmount * (localConveyanceInput / 100) :
                    localConveyanceInput * 12;
                $('#local_conveyance_amount').val(localConveyanceAmount.toFixed(2));

                const totalGrossSalaryYearly = (monthlyGrossAmount * 12) + employerPFAmount;
                const totalGrossSalaryMonthly = totalGrossSalaryYearly / 12;
                const monthlyCTC = totalGrossSalaryMonthly + (variablePayAmount / 12) + (sipAmount / 12) + (
                    localConveyanceAmount / 12);
                const monthlySalary = (annualPackage - employerPFAmount) / 12;

                $('#monthlyCTC').val(roundValue(monthlyCTC).toFixed(2));
                $('#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, .local-conveyance-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';
                    else if (dropdownToggle.hasClass('local-conveyance-dropdown')) typeId = 'local_conveyance';

                    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]);
                            });
                        },
                        complete: function() {
                            // Re-enable the button
                            $('#updateEmployeeCTC').prop('disabled', false).html('Update');
                        }
                    });
                } else {
                    return false;
                }
            });
        });
    </script>
@endsection