@extends('layouts.master')
@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            @if (!session('employee_not_found'))
                <div class="page-title-heading">
                    <div>
                        {{ $title }}
                        <div class="page-title-subheading">

                            @php
                                $payPeriod =
                                    $pamPayRun->pamPayRunPeriod->calendar_month .
                                    '-' .
                                    $pamPayRun->pamPayRunPeriod->calendar_year;
                                $monthName = date('F', strtotime($payPeriod));
                                echo 'Payslip Period - ' .
                                    $monthName .
                                    ' ' .
                                    $pamPayRun->pamPayRunPeriod->calendar_year;
                            @endphp

                        </div>
                    </div>
                </div>
            @else
            {{-- back button for the emp not found view --}}
                <a href="{{ route('pam-emps.index', [$pamEmp->payroll_id]) }}"> <i class="fa fa-arrow-left"></i></a>
            @endif

            {{-- search for payslip by man number for the current payroll run --}}
            <form action="{{ route('pam-payslips.search-man-number') }}" class="col-4 mx-auto" method="GET">
                <input type="hidden" name="pay_run_id" value="{{ $pamPayRun->id }}">
                <div class="input-group">
                    <input type="text" name="man_number" class="form-control" placeholder="Search payslip in current payroll run by Man Number">
                    <button class="btn btn-outline-primary" type="submit">Search</button>
                </div>
            </form>

            @if (!session('employee_not_found'))

                <div class="page-title-actions">
                    @if (auth()->user()->roles->first()->permissions->contains('name', 'Manage NAPSA contributors'))
                        <div class="d-inline-block dropdown">
                            <a data-bs-toggle="modal" data-bs-target="#napsaContributionModal"
                                class="btn-shadow btn btn-success">

                                @if ($pamEmp->pamEmployee->is_napsa_contributor)
                                    <i class="fa fa-minus "></i>
                                    <span>Disable NAPSA Contribution</span>
                                @else
                                    <i class="fa fa-plus "></i>
                                    <span>Enable NAPSA Contribution</span>
                                @endif
                            </a>

                        </div>
                    @endif

                    <div class="d-inline-block dropdown">
                        <a class="btn-shadow btn btn-success"
                            href="{{ route('pam-payslips.pdf-payslip', [$pamPayslip->man_number, $pamPayslip->pay_run_id]) }}">

                            <i class="fa fa-print "></i>

                            <span>View Payslip</span>
                        </a>

                    </div>
                </div>

            @endif

        </div>
        @if (isset($error) || session('error'))
            <div class="alert alert-danger">
                {{ $error ?? session('error') }}
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
    </div>


    @if (!session('employee_not_found'))
        <div class="main-card mb-3 card">
            <div class="card-body">
                <a href="{{ route('pam-emps.index', [$pamEmp->payroll_id]) }}"> <i class="fa fa-arrow-left"></i></a>
                <div class="text-center">
                    <h4 class="c-grey-900 mB-20"> <strong> {{ strtoupper($title) }}</strong></h4>
                </div>

                <div class="row">
                    <div class="col-md-12">

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_name">Title : {{ $pamEmp->pamHRUser->title }} </label>
                                </div>
                                <div class="form-group">
                                    <label for="first_name">First Name : {{ $pamEmp->pamHRUser->first_name }}
                                        {{ $pamEmp->pamHRUser->middle_name }}</label>
                                </div>

                                <div class="form-group">
                                    <label for="last_name">Last Name :{{ $pamEmp->pamHRUser->last_name }} </label>
                                </div>

                                <div class="form-group">
                                    <label for="gender">Gender : {{ $pamEmp->pamHRUser->sex }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="date_of_birth">Date of Birth : {{ $pamEmp->pamHRUser->dob }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="date_of_birth">Contact no. : {{ $pamEmp->pamHRUser->phone }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="date_of_birth">Email. : {{ $pamEmp->pamHRUser->email }}</label>
                                </div>
                            </div>
                            <div class="col-md-4">

                                <div class="form-group">
                                    <label for="man_number">Employee Number : {{ $pamEmp->pamHRUser->man_number }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">National ID : {{ $pamEmp->pamHRUser->nrc }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">TPIN : {{ $pamEmp->pamHRUser->tpin }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">SSN: {{ $pamEmp->pamHRUser->social_security_number }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">NIHMA No: {{ $pamEmp->pamHRUser->nihma_no }}</label>
                                </div>

                                <div class="form-group">
                                    <label for="date_of_employment">Date of Employment :
                                        {{ $pamEmp->date_of_appointment ? $pamEmp->date_of_appointment : '' }}</label>
                                </div>


                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="national_id">Unit :
                                        {{ $pamEmp->pamEmpDepartment->pamEmpUnit->name }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">Department : {{ $pamEmp->pamEmpDepartment->name }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="national_id">Job Title : {{ $pamEmp->pamEmpJobPosition->title }}</label>
                                </div>
                                <div class="form-group">
                                    <label for="basic_pay">Salary Scale :
                                        {{ $pamEmp->pamEmpSalaryScaleNotch->pamEmpSalaryScale->code ? $pamEmp->pamEmpSalaryScaleNotch->pamEmpSalaryScale->code : '' }}
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label for="basic_pay">Salary Scale Notch :
                                        {{ number_format($pamPayslip->pamEmp->basic_pay, 2, '.', ',') }} </label>
                                </div>
                                <div class="form-group">
                                    <label for="leave_days">Leave Days :
                                        {{ $pamEmp->pamHRUser->pamEmpLeave ? $pamEmp->pamHRUser->pamEmpLeave->remaining_days : 0 }}
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>Pay Period:
                                        {{ $pamPayRun->pamPayRunPeriod->calendar_month . '-' . $pamPayRun->pamPayRunPeriod->calendar_year }}
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>

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

        <div class="main-card mb-3 card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card-title text-left">{{ $earningTitle }}
                            @if (auth()->user()->roles->first()->permissions->contains('name', 'Manage payslips'))
                                <a data-bs-toggle="modal" data-bs-target="#addEarnModal" class="btn btn-success btn-color">
                                    <i class="fa fa-plus"></i></a>
                            @endif
                        </div>
                        <br />
                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                <table style="width: 100%;" id="dataTableEarn"
                                    class="table table-hover table-striped table-bordered">

                                    <thead>
                                        <tr>
                                            <th>Description</th>
                                            <th>Hrs/Units</th>
                                            <th>Amount</th>
                                            <th>Start</th>
                                            <th>End</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pamPayslipEarnDefs as $item)
                                            <tr>
                                                <td style="text-align: left;width:25%">
                                                    {{ $item->pamEarnDef->short_description }}
                                                </td>
                                                <td style="text-align: right;width:10%">{{ $item->units }}</td>
                                                <td style="text-align: right;width:40%">
                                                    {{ number_format($item->amount, 2, '.', ',') }}
                                                </td>
                                                <td style="text-align: right;width:10%">
                                                    {{ date('Y-m-d', strtotime($item->start_date)) }}
                                                </td>
                                                <td style="text-align: right;width:10%">
                                                    {{ $item->end_date ? date('Y-m-d', strtotime($item->end_date)) : '' }}
                                                </td>
                                                <td style="text-align: right;width:5%">
                                                    @if (auth()->user()->roles->first()->permissions->contains('name', 'Manage payslips'))
                                                        @if ($item->pamEarnDef->pamEarnType->code == 'BASIC')
                                                            <a data-bs-toggle="modal"
                                                                data-bs-target="#editEarnModal-{{ $item->id }}"
                                                                class="btn cur-p btn-success btn-color">
                                                                <i class="fa fa-edit"></i>
                                                            </a>
                                                        @endif
                                                        @if ($item->pamEarnDef->pamEarnType->code !== 'BASIC')
                                                            <a data-bs-toggle="modal"
                                                                data-bs-target="#deleteEarnModal-{{ $item->id }}"
                                                                class="btn cur-p btn-danger btn-color"><i
                                                                    class="fa fa-trash"></i>
                                                            </a>
                                                        @endif
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">

                        <div class="card-title text-left">{{ $deductionTitle }}

                            @if (auth()->user()->roles->first()->permissions->contains('name', 'Manage payslips'))
                                <a data-bs-toggle="modal" data-bs-target="#addDeduModal"
                                    class="btn btn-success btn-color">
                                    <i class="fa fa-plus"></i></a>
                            @endif
                        </div>
                        <br />
                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                <table style="width: 100%;" id="dataTableDedu"
                                    class="table table-hover table-striped table-bordered">

                                    <thead>
                                        <tr>
                                            <th>Description</th>
                                            <!-- <th>Hrs/Units</th> -->
                                            <th>Amount</th>
                                            <th>Balance</th>
                                            <th>Start</th>
                                            <th>End</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($pamPayslipDeduDefs as $item)
                                            <tr>
                                                <td style="text-align: left;width:25%">
                                                    {{ $item->pamDeduDef->short_description }}
                                                </td>
                                                <!-- <td style="text-align: right;width:5%">{{ $item->units }}</td> -->
                                                <td style="text-align: right;width:20%">
                                                    {{ number_format($item->amount, 2, '.', ',') }}
                                                </td>
                                                @if ($item->pamDeduDef->pamDeduType->code === 'LOAN')
                                                    <td style="text-align: right; width: 15%">
                                                        {{ $item->pamLoan ? number_format($item->pamLoan->loan_balance_amount, 2, '.', ',') : 0 }}
                                                    </td>
                                                @else
                                                    <td style="text-align: right; width: 15%"></td>
                                                @endif
                                                <td style="text-align: right;width:10%">
                                                    {{ date('Y-m-d', strtotime($item->start_date)) }}
                                                </td>
                                                <td style="text-align: right;width:10%">
                                                    {{ $item->end_date ? date('Y-m-d', strtotime($item->end_date)) : '' }}
                                                </td>
                                                <td style="text-align: right;width:5%">
                                                    @if (
                                                        $item->pamDeduDef->pamDeduType->code !== 'INCTAX' &&
                                                            $item->pamDeduDef->pamDeduType->code !== 'SOCIALSECURITY' &&
                                                            $item->pamDeduDef->code !== 'NAPSA')
                                                        @if (auth()->user()->roles->first()->permissions->contains('name', 'Manage payslips'))
                                                            <a data-bs-toggle="modal"
                                                                data-bs-target="#deleteDeduModal-{{ $item->id }}"
                                                                class="btn cur-p btn-danger btn-color"><i
                                                                    class="fa fa-trash"></i>
                                                            </a>
                                                        @endif
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Total Earnings :
                                        {{ number_format($pamPayslip->gross_earnings, 2, '.', ',') }}</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Total Deductions : {{ number_format($deductions, 2, '.', ',') }}</label>
                                </div>
                            </div>

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


                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Net Pay:
                                        {{ number_format($pamPayslip->gross_earnings - $deductions, 2, '.', ',') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    @else
        <div class="alert-warning p-3">
                {{ session('employee_not_found') }}
        </div>
    @endif

@endsection

@section('modal')
    <div class="modal fade" id="addDeduModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ADD A DEDUCTION TO
                        {{ strtoupper($pamEmp->pamHRUser->fullname) }} PAYSLIP

                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <form method="post" id="addDedu"
                                action="{{ route('pam-payslips.store-payslip-dedu-def') }}">
                                @csrf

                                <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $pamPayslip->id }}">
                                <input type="hidden" name="emp_id" id="emp_id" value="{{ $pamPayslip->emp_id }}">
                                <input type="hidden" name="man_number" id="man_number"
                                    value="{{ $pamPayslip->man_number }}">

                                <input type="hidden" name="pay_run_id" id="pay_run_id"
                                    value="{{ $pamPayslip->pay_run_id }}">
                                <input type="hidden" name="mandatory" id="mandatory" value="1">
                                <input type="hidden" name="payroll_id" id="payroll_id"
                                    value="{{ $pamPayslip->pamEmp->payroll_id }}">

                                <div class="row">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label">Deduction Name<span class="text-danger">*</span></label>
                                        <select class="form-control select2" name="dedu_def_id" id="dedu_def_id"
                                            style="width: 100%;">
                                            <option value="">Select One</option>
                                            @foreach ($pamDeduDefs as $item)
                                                <option value="{{ $item->id }}"
                                                    data-code="{{ $item->pamDeduType->code }}"
                                                    data-fixed-amount="{{ $item->fixed_amount }}"
                                                    data-moc="{{ $item->mode_of_calculation }}">
                                                    {{ strtoupper($item->short_description) }} -
                                                    @if ($item->mode_of_calculation === 'percentage')
                                                        {{ $item->percentage }}%
                                                    @else
                                                        Fixed Amount : {{ $item->fixed_amount }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('dedu_def_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div id="loanInputs" style="display: none;">
                                    <div class="row">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="principal_amount">Principal Amount<span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="principal_amount"
                                                id="principal_amount" placeholder="Amount">
                                            @error('principal_amount')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="interest_amount">Interest Amount</label>
                                            <input type="text" class="form-control" name="interest_amount"
                                                id="interest_amount" placeholder="Amount">
                                            @error('interest_amount')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <div class="form-group">
                                                <label class="form-label" for="mode_of_calculation">Instalment Based
                                                    on<span class="text-danger">*</span></label>
                                                <label><input type="radio" name="mode_of_calculation"
                                                        id="mode_of_calculation" value="agreed_amount" id="fixedRadio"
                                                        required checked> Agreed
                                                    Amount</label>
                                                <label><input type="radio" name="mode_of_calculation"
                                                        value="loan_tenure" data-type="default" id="percentageRadio"
                                                        required> Loan Tenure</label><br />
                                                <label><input step="0.01" type="number" class="form-control"
                                                        name="figure_input" id="figure_input" placeholder="Value"
                                                        required></label>

                                                @error('mode_of_calculation')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                @error('figure_input')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div id="nonLoanInputs" style="display: none;">
                                    <!-- Form fields go here -->

                                    <div class="row" id="fixedInputs" style="display: none;">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="units">Units<span
                                                    class="text-danger">*</span></label>
                                            <input type="number" step=0.01 class="form-control" name="units"
                                                id="units" value="1" step="0.01" min="0"
                                                placeholder="Units">
                                            @error('units')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label" for="input_amount">Amount<span
                                                    class="text-danger">*</span></label>
                                            <input type="number" step=0.01 class="form-control" name="input_amount"
                                                id="input_amount" placeholder="Amount" value="0" step="0.01"
                                                min="0">
                                            @error('input_amount')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="mb-3 col-md-12">

                                            <label class="form-label">End Period</label>
                                            <select class="form-control" name="end_date" id="end_period">
                                                <option value="">Select End Period</option>
                                                @foreach ($pamPayRunPeriods as $item)
                                                    @if ($item->end_date >= $pamPayslip->pamPayRun->pamPayRunPeriod->end_date)
                                                        @php
                                                            // Create a DateTime object using the calendar_month and calendar_year
                                                            $date = DateTime::createFromFormat(
                                                                '!m-Y',
                                                                $item->calendar_month . '-' . $item->calendar_year,
                                                            );
                                                            // Format the date to get the full month name
                                                            $monthName = $date->format('F');
                                                        @endphp
                                                        <option value="{{ $item->end_date }}">
                                                            {{ $monthName }}-{{ $item->calendar_year }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @error('end_period')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div> <!-- Close the row here -->

                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <div class="main-card mb-3 card">
                                                <div class="card-body">
                                                    <strong>Recurrence Frequency</strong>
                                                    <div class="row">
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_1" id="recurrence_period_1" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_1">{{ date('M', mktime(0, 0, 0, 1, 1)) }}</label>
                                                            </div>
                                                        </div>

                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_2" id="recurrence_period_2" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_2">{{ date('M', mktime(0, 0, 0, 2, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_3" id="recurrence_period_3" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_3">{{ date('M', mktime(0, 0, 0, 3, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_4" id="recurrence_period_4" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_4">{{ date('M', mktime(0, 0, 0, 4, 1)) }}</label>
                                                            </div>
                                                        </div>

                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_4" id="recurrence_period_5" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_4">{{ date('M', mktime(0, 0, 0, 5, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_6" id="recurrence_period_6" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_6">{{ date('M', mktime(0, 0, 0, 6, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_6" id="recurrence_period_7" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_7">{{ date('M', mktime(0, 0, 0, 7, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_8" id="recurrence_period_8" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_8">{{ date('M', mktime(0, 0, 0, 8, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_9" id="recurrence_period_9" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_9">{{ date('M', mktime(0, 0, 0, 9, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_10"
                                                                    id="recurrence_period_10" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_10">{{ date('M', mktime(0, 0, 0, 10, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_11"
                                                                    id="recurrence_period_11" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_11">{{ date('M', mktime(0, 0, 0, 11, 1)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 col-md-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    name="recurrence_period_12"
                                                                    id="recurrence_period_12" />
                                                                <label class="form-check-label"
                                                                    for="recurrence_period_12">{{ date('M', mktime(0, 0, 0, 12, 1)) }}</label>
                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="row">
                                                        <div class="mb-3 col-md-6">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="selectAllRecurrence1">
                                                                <label class="form-check-label"
                                                                    for="selectAllRecurrence1">
                                                                    Select all
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="copyToAllEmployees"
                                                    id="copyToAllEmployees">
                                                <label class="form-check-label" for="copyToAllEmployees">
                                                    Copy to all employees in
                                                    {{ strtoupper($pamEmp->pamPayroll->short_description) }} payroll
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="mb-3 col-md-12">
                                        <div class="form-group">
                                            <label class="form-label" for="status">Status <span
                                                    class="text-danger">*</span></label>
                                            <label><input type="radio" name="status" value="active" required>
                                                Active</label>
                                            <label><input type="radio" name="status" value="inactive" required>
                                                Inactive</label>
                                        </div>
                                    </div>
                                </div>

                                <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close">
                                    Close</button>
                                <button type="submit" class="btn btn-success">Submit</button>

                            </form>

                        </div>
                        <div class="col-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <div class="text-center">
                                        <h6 class="c-grey-900 mB-20"><strong>INSTRUCTIONS</strong></h6>
                                    </div>
                                    <p>Please follow these steps to add a deduction to the payslip:</p>
                                    <ol>
                                        <li>Fill in the required fields:
                                            <ul>
                                                <li>Deduction Name <span class="text-danger">*</span>: Select the deduction
                                                    from the dropdown menu.</li>
                                                <li>Fill in other applicable fields according to the deduction type.</li>
                                                <li>End Period: Select the end period from the dropdown menu.</li>
                                            </ul>
                                        </li>
                                        <li>Check the recurrence frequency checkboxes as needed.</li>
                                        <li>Select the status of the deduction.</li>
                                        <li>Check "Copy to all employees in
                                            {{ strtoupper($pamEmp->pamPayroll->short_description) }} payroll" if you want
                                            to apply the deduction to all employees in this payroll.</li>
                                        <li>Click the "Submit" button to add the deduction.</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="addEarnModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ADD AN EARNING TO
                        {{ strtoupper($pamEmp->pamHRUser->fullname) }} PAYSLIP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-6">
                            <!-- Form for adding earning to payslip -->
                            <form method="post" action="{{ route('pam-payslips.store-payslip-earn-def') }}">
                                @csrf
                                <!-- Hidden input fields for necessary data -->
                                <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $pamPayslip->id }}">
                                <input type="hidden" name="emp_id" id="emp_id" value="{{ $pamPayslip->emp_id }}">
                                <input type="hidden" name="man_number" id="man_number"
                                    value="{{ $pamPayslip->man_number }}">
                                <input type="hidden" name="pay_run_id" id="pay_run_id"
                                    value="{{ $pamPayslip->pay_run_id }}">
                                <input type="hidden" name="mandatory" id="mandatory" value="1">
                                <input type="hidden" name="payroll_id" id="payroll_id"
                                    value="{{ $pamPayslip->pamEmp->payroll_id }}">

                                <!-- Dropdown to select earning -->
                                <div class="row">
                                    <div class="form-group col-md-12 mb-3">
                                        <label class="form-label">Earning Name<span class="text-danger">*</span></label>
                                        <select class="form-control select2" name="earn_def_id" id="earn_def_id"
                                            style="width: 100%;">
                                            <option>Select One</option>
                                            <!-- Loop through available earning definitions -->
                                            @foreach ($pamEarnDefs as $item)
                                                <option value="{{ $item->id }}"
                                                    data-earn-def-type="{{ $item->pamEarnType->code }}"
                                                    data-fixed-amount="{{ $item->fixed_amount }}"
                                                    data-calculation-method="{{ $item->mode_of_calculation }}">
                                                    {{ strtoupper($item->short_description) }} -
                                                    @if ($item->mode_of_calculation === 'percentage')
                                                        {{ $item->percentage }}%
                                                    @else
                                                        Fixed Amount : {{ $item->fixed_amount }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('earn_def_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div> <!-- Close the row here -->


                                <!-- Input fields for units and amount -->
                                <div class="row" id="calculationMethodFixed">
                                    <div class="mb-3 col-md-6">
                                        <label class="form-label" for="units">Units<span
                                                class="text-danger">*</span></label>
                                        <input type="number" class="form-control" name="units" id="units"
                                            placeholder="Units" value="1" step="0.01" min="0">
                                        @error('units')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3 col-md-6" id="nonOvertimeInputs" style="display: block;">
                                        <label class="form-label" for="input_amount">Amount</label>
                                        <input type="number" class="form-control" name="input_amount" id="input_amount"
                                            placeholder="Amount" value="0" step="0.01" min="0">
                                        @error('input_amount')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>

                                </div>

                                <!-- Dropdown to select end period -->
                                <div class="row">
                                    <div class="mb-3 col-md-12">
                                        <label class="form-label">End Period</label>
                                        <select class="form-control" name="end_date" id="end_date">
                                            <option value="">Select End Period</option>
                                            <!-- Loop through available pay run periods -->
                                            @foreach ($pamPayRunPeriods as $item)
                                                @if ($item->end_date >= $pamPayslip->pamPayRun->pamPayRunPeriod->end_date)
                                                    @php
                                                        // Create a DateTime object using the calendar_month and calendar_year
                                                        $date = DateTime::createFromFormat(
                                                            '!m-Y',
                                                            $item->calendar_month . '-' . $item->calendar_year,
                                                        );
                                                        // Format the date to get the full month name
                                                        $monthName = $date->format('F');
                                                    @endphp
                                                    <option value="{{ $item->end_date }}">
                                                        {{ $monthName . ' - ' . $item->calendar_year }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                        @error('end_period')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div> <!-- Close the row here -->

                                <!-- Recurrence frequency checkboxes -->

                                <strong>Recurrence Frequency</strong>
                                <!-- Loop to create checkboxes for each period -->
                                @php
                                    $totalPeriods = 12; // Set the total number of periods you want
                                    $fieldNamePrefix = 'recurrence_period_';
                                @endphp
                                @for ($period = 1; $period <= $totalPeriods; $period++)
                                    @if ($period % 6 == 1)
                                        <!-- Start a
                                                                new row after every 6 periods -->
                                        <div class="row">
                                    @endif
                                    <div class="mb-3 col-md-2">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                name="{{ $fieldNamePrefix . $period }}"
                                                id="{{ $fieldNamePrefix . $period }}" />
                                            <label class="form-check-label" for="{{ $fieldNamePrefix . $period }}">
                                                {{ date('M', mktime(0, 0, 0, $period, 1)) }}
                                            </label>
                                        </div>
                                    </div>
                                    @if ($period % 6 == 0 || $period == $totalPeriods)
                                        <!-- Close the row after every 6 periods or at the end -->
                        </div>
                        @endif
                        @endfor

                        <!-- Select all and apply to all employees checkboxes -->
                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAllRecurrence">
                                    <label class="form-check-label" for="selectAllRecurrence">
                                        Select all
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="copyToAllEmployees"
                                        id="copyToAllEmployees" hidden>
                                    {{-- <label class="form-check-label" for="copyToAllEmployees">
                                                Copy to all employees in {{$pamEmp->pamPayroll->short_description}}
                                            </label> --}}
                                </div>
                            </div>
                        </div>


                        <!-- Radio buttons for status -->
                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="status">Status</label>
                                    <label><input type="radio" name="status" value="active" required>
                                        Active</label>
                                    <label><input type="radio" name="status" value="inactive" required>
                                        Inactive</label>
                                </div>
                            </div>
                        </div>

                        <!-- Buttons to close the modal and submit the form -->
                        <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close">
                            Close</button>
                        <button type="submit" class="btn btn-success">Submit</button>
                        </form>
                        <!-- End of form -->
                    </div>
                    <div class="col-6">
                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                <div class="text-center">
                                    <h6 class="c-grey-900 mB-20"><strong>INSTRUCTIONS</strong></h6>
                                </div>
                                <p>Please follow these steps to add an earning to the payslip:</p>
                                <ol>
                                    <li>Fill in the required fields:
                                        <ul>
                                            <li>Earning Name <span class="text-danger">*</span>: Select the earning from
                                                the dropdown menu.</li>
                                            <li>Units: Enter the number of units.</li>
                                            <li>Amount: Enter the amount.</li>
                                            <li>End Period: Select the end period from the dropdown menu.</li>
                                        </ul>
                                    </li>
                                    <li>Check the recurrence frequency checkboxes as needed.</li>
                                    <li>Select the status of the earning.</li>
                                    <li>Check "Copy to all employees in {{ $pamEmp->pamPayroll->short_description }}" if
                                        you want to apply the earning to all employees in this payroll.</li>
                                    <li>Click the "Submit" button to add the earning.</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <div class="modal fade" id="napsaContributionModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    @if ($pamEmp->pamEmployee->is_napsa_contributor)
                        <h5 class="modal-title" id="exampleModalLabel">Disable NAPSA for
                            {{ $pamEmp->pamHRUser->fullName }}
                        </h5>
                    @else
                        <h5 class="modal-title" id="exampleModalLabel">Enable NAPSA for
                            {{ $pamEmp->pamHRUser->fullName }}
                        </h5>
                    @endif
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <form id="linkToPayrollForm1" method="POST" action="{{ route('pam-payslips.napsa-contributor') }}">
                    @csrf
                    <div class="modal-body">




                        <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $pamPayslip->id }}">
                        <input type="hidden" name="emp_id" id="emp_id" value="{{ $pamPayslip->emp_id }}">
                        <input type="hidden" name="man_number" id="man_number" value="{{ $pamPayslip->man_number }}">
                        <input type="hidden" name="pay_run_id" id="pay_run_id" value="{{ $pamPayslip->pay_run_id }}">
                        <input type="hidden" name="mandatory" id="mandatory" value="1">
                        <input type="hidden" name="payroll_id" id="payroll_id"
                            value="{{ $pamPayslip->pamEmp->payroll_id }}">


                        @if ($pamEmp->pamEmployee->is_napsa_contributor)
                            <input type="hidden" name="is_napsa_contributor" id="is_napsa_contributor" value="0">
                            <p class="mb-0">

                                Are you sure you want to disable NAPSA Contribution for
                                {{ $pamEmp->pamHRUser->fullName }}?
                            </p>
                        @else
                            <input type="hidden" name="is_napsa_contributor" id="is_napsa_contributor" value="1">
                            <p class="mb-0">

                                Are you sure you want to enable NAPSA Contribution for {{ $pamEmp->pamHRUser->fullName }}?
                            </p>
                        @endif

                    </div>


                    <div class="modal-footer">

                        <a data-bs-dismiss="modal"
                            class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-secondary">No</a>

                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">Yes</button>
                    </div>

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

    @foreach ($pamPayslipEarnDefs as $key => $item)
        <div class="modal fade" id="deleteEarnModal-{{ $item->id }}" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">DELETE
                            {{ strtoupper($item->pamEarnDef->short_description) }} EARNING FOR
                            {{ strtoupper($pamEmp->pamHRUser->fullname) }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="earn-{{ $item->id }}" method="post"
                            action="{{ route('pam-payslips.destroy-payslip-earn-def') }}">
                            @csrf
                            @method('POST') {{-- Use POST method --}}

                            <input type="hidden" name="id" value="{{ $item->id }}">
                            <input type="hidden" name="emp_id" id="emp_id" value="{{ $item->emp_id }}">
                            <input type="hidden" name="man_number" id="man_number" value="{{ $item->man_number }}">
                            <input type="hidden" name="pay_run_id" id="pay_run_id" value="{{ $item->pay_run_id }}">
                            <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $item->payslip_id }}">


                            <p class="mb-3">
                                Are you sure you want to delete {{ strtoupper($item->pamEarnDef->short_description) }} for
                                {{ strtoupper($pamEmp->pamHRUser->name) }}?
                            </p>

                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" name="copyToAllEmployees"
                                    id="copyToAllEmployees">
                                <label class="form-check-label" for="copyToAllEmployees">
                                    Tick to apply to all employees in the
                                    {{ strtoupper($item->pamEmp->pamPayroll->short_description) }} payroll
                                </label>
                            </div>


                            <div class="modal-footer">
                                <a data-bs-dismiss="modal"
                                    class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-dark">No</a>
                                <button type="submit"
                                    class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- End of Modal -->

        <div class="modal fade" id="editEarnModal-{{ $item->id }}" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">EDIT
                            {{ strtoupper($item->pamEarnDef->short_description) }} EARNING FOR
                            {{ strtoupper($pamEmp->pamHRUser->name) }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{ route('pam-payslips.update-payslip-earn-def', $item->id) }}">
                            @csrf
                            @method('PUT') {{-- Use PUT method for updates --}}
                            <input type="hidden" name="payslip_earn_id" id="payslip_earn_id"
                                value="{{ $item->id }}">
                            <input type="hidden" name="emp_id" id="emp_id" value="{{ $item->emp_id }}">
                            <input type="hidden" name="man_number" id="man_number" value="{{ $item->man_number }}">
                            <input type="hidden" name="pay_run_id" id="pay_run_id" value="{{ $item->pay_run_id }}">
                            <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $item->payslip_id }}">

                            <div class="row">
                                <div class="mb-3 col-md-12">
                                    <label class="form-label" for="earn_def_id">Earning Code</label>
                                    <input type="text" value=" {{ $item->earn_def_code }}" class="form-control"
                                        disabled>

                                </div>
                                <div class="mb-3 col-md-12">
                                    <label class="form-label">Earning Name</label>
                                    <input type="text" value="{{ $item->pamEarnDef->short_description }}"
                                        class="form-control" disabled>


                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-3 col-md-12">
                                    <label class="form-label" for="units">Units (Days Works)</label>
                                    <input type="text" class="form-control" name="units" id="units"
                                        placeholder="Units" value="{{ old('units', $item->units) }}">
                                    @error('units')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>


                            <!-- ... Other form fields ... -->

                            <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close">
                                Close</button>
                            <button type="submit" class="btn btn-success">Submit</button>
                            <div class="mT-30">
                                @if (isset($error) || session('error'))
                                    <div class="alert alert-danger">
                                        {{ $error ?? session('error') }}
                                    </div>
                                @endif
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    @endforeach

    @foreach ($pamPayslipDeduDefs as $key => $item)
        <div class="modal fade" id="deleteDeduModal-{{ $item->id }}" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">DELETE
                            {{ strtoupper($item->pamDeduDef->short_description) }} DEDUCTION FOR
                            {{ strtoupper($pamEmp->pamHRUser->fullname) }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="del-{{ $item->id }}" method="post"
                            action="{{ route('pam-payslips.destroy-payslip-dedu-def') }}">
                            @csrf
                            @method('POST') {{-- Use POST method --}}

                            <input type="hidden" name="id" value="{{ $item->id }}">
                            <input type="hidden" name="emp_id" id="emp_id" value="{{ $item->emp_id }}">
                            <input type="hidden" name="man_number" id="man_number" value="{{ $item->man_number }}">
                            <input type="hidden" name="pay_run_id" id="pay_run_id" value="{{ $item->pay_run_id }}">
                            <input type="hidden" name="payslip_id" id="payslip_id" value="{{ $item->payslip_id }}">


                            <p class="mb-3">
                                Are you sure you want to delete {{ strtoupper($item->pamDeduDef->short_description) }} for
                                {{ strtoupper($pamEmp->pamHRUser->name) }}?
                            </p>

                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" name="copyToAllEmployees"
                                    id="copyToAllEmployees">
                                <label class="form-check-label" for="copyToAllEmployees">
                                    Tick to apply to all employees in the
                                    {{ strtoupper($item->pamEmp->pamPayroll->short_description) }} payroll
                                </label>
                            </div>


                            <div class="modal-footer">
                                <a data-bs-dismiss="modal"
                                    class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-dark">No</a>
                                <button type="submit"
                                    class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success">Yes</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection

@section('scripts')
    <script>
        $(function() {
            $('#earn_def_id').select2();
        });
    </script>

    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.select2').select2();

            // Show/hide inputs based on selected option
            $('#dedu_def_id').change(function() {
                var deduDefId = this.value;
                var selectedOption = $(this).find(':selected');
                var selectedCode = selectedOption.data('code');
                var selectedMoc = selectedOption.data('moc');

                // Assuming 'LOAN' is the code for the option you want to check
                if (selectedCode === 'LOAN') {
                    $('#nonLoanInputs').hide();
                    $('#loanInputs').show();
                    // Set mode_of_calculation to 'fixed'
                    // $("input[name='mode_of_calculation'][value='fixed']").prop('checked', true);
                    $('#units').val('1');
                    $('#input_amount').val('0');

                    // Make the interest_amount and principal_amount fields required
                    $('#principal_amount').prop('required', true);
                    $('#interest_amount').prop('required', true);
                    $('#mode_of_calculation').prop('required', true);
                    $('#figure_input').prop('required', true);
                    // $('#addDedu').attr('action', '{{ route('pam-payslips.store-payslip-dedu-def') }}');

                } else {
                    $('#loanInputs').hide();
                    $('#nonLoanInputs').show();

                    // Remove the required attribute for interest_amount and principal_amount
                    $('#units').prop('required', true);
                    $('#principal_amount').prop('required', false);
                    $('#interest_amount').prop('required', false);
                    $('#mode_of_calculation').prop('required', false);
                    $('#figure_input').prop('required', false);
                    $('#figure_input').val('0');
                    $('#principal_amount').val('0');
                    $('#interest_amount').val('0');
                    $('#figure_input').val(0);
                    $('#end_period').val('');

                    if (selectedMoc !== 'fixed') {

                        $.ajax({
                            //url: '/getProduct?product_id=' + productId,
                            url: '{{ route('getPamDeduDef') }}?dedu_def_id=' + deduDefId,
                            type: 'get',
                            success: function(res) {


                                // Check if the response is valid and contains the expected data
                                if (res && res.fixed_amount !== undefined) {
                                    // Update the value of the element with the id 'current_price'
                                    $('#input_amount').val(res.fixed_amount);

                                    // If you have another dropdown with id 'city', you can populate it here
                                    // $('#city').html('<option value="">Select City</option>');
                                } else {
                                    // Handle invalid or unexpected response
                                    $('#input_amount').val('0');
                                    console.error('Invalid response format');
                                }
                            },
                            error: function(xhr, status, error) {
                                // Handle AJAX errors
                                $('#input_amount').val('0');
                                console.error('AJAX error: ' + status + ', ' + error);
                            }
                        });

                        $('#units').val('1');

                        $('#fixedInputs').hide();

                    } else {
                        $('#fixedInputs').show();
                        $('#input_amount').prop('required', false);
                    }
                    // $('#addDedu').attr('action', '{{ route('pam-payslips.store-payslip-dedu-def') }}');

                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectAllRecurrence = document.getElementById("selectAllRecurrence");
            const recurrenceCheckboxes = document.querySelectorAll("#addEarnModal [name^='recurrence_period_']");

            selectAllRecurrence.addEventListener("change", function() {
                recurrenceCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = selectAllRecurrence.checked;
                });
            });

            recurrenceCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener("change", function() {
                    selectAllRecurrence.checked = [...recurrenceCheckboxes].every((c) => c.checked);
                });
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectAllRecurrence = document.getElementById("selectAllRecurrence1");
            const recurrenceCheckboxes = document.querySelectorAll("#addDeduModal [name^='recurrence_period_']");

            selectAllRecurrence.addEventListener("change", function() {
                recurrenceCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = selectAllRecurrence.checked;
                });
            });

            recurrenceCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener("change", function() {
                    selectAllRecurrence.checked = [...recurrenceCheckboxes].every((c) => c.checked);
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Show/hide inputs based on selected option and calculation method
            $('#earn_def_id').change(function() {
                var selectedOption = $(this).find(':selected');
                var selectedCode = selectedOption.data('earn-def-type');
                var calculationMethod = selectedOption.data('calculation-method');
                var fixedAmount = selectedOption.data('fixed-amount');

                if (calculationMethod === 'fixed') {
                    $('#calculationMethodFixed').show();
                    // Assuming 'OVERTIME' and 'LEAVECOMM' are the codes for the options you want to check
                    if (selectedCode === 'OVERTIME' || selectedCode === 'LEAVECOMM') {
                        $('#nonOvertimeInputs').hide();
                        $('#loanInputs').show();
                        $('#input_amount').val('0');
                    } else {
                        $('#nonOvertimeInputs').show();
                        $('#loanInputs').hide();
                        $('#input_amount').val(fixedAmount);
                    }
                } else {
                    // Assuming 'percentage' is the calculation method to hide input_amount and units

                    $('#calculationMethodFixed').hide();
                    $('#input_amount').val('0');
                    $('#units').val('1');
                }
            });
        });
    </script>





    <script>
        $(function() {
            $('#earn_def_id').select2({
                dropdownParent: $('#addEarnModal')
            });
            $('#dedu_def_id').select2({
                dropdownParent: $('#addDeduModal')
            })
        });
    </script>
@endsection