@extends('layouts.master')
@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div class="page-title-icon">
                <i class="pe-7s-medal icon-gradient bg-tempting-azure"></i>
            </div>
            <div>
                {{ $title }}
                <div class="page-title-subheading">A list of payslip earnings and deductions for an employee</div>
            </div>
        </div>
        <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">
                    <i class="fa fa-plus "></i>
                    @if($pamEmp->pamEmployee->is_napsa_contributor)
                    <span>Disable NAPSA Contribution</span>
                    @else

                    <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',[$pamEmp->id,$pamEmp->pamPayroll->current_pay_run_id]) }}">

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

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

            </div>
        </div>

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

<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($pamPayslipEarnDefsAdded 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($pamPayslipDeduDefsAdded 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->net_pay,2, '.', ',')}}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection



@section('modal')

<div class="modal fade" id="addDeduModal" 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">ADD FOR DEDUCTION {{ $pamEmp->pamHRUser->first_name }}
                    {{ $pamEmp->pamHRUser->last_name }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <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="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 }}">


                    @php
                    $pamDeduDefs = \App\Models\PamDeduDef::where('status', 'active')->get();
                    $pamPayslipDeduDefs = \App\Models\PamPayslipDeduDef::where('payslip_id', $pamPayslip->id)->get();
                    $notInPamPayslipDeduDef = [];

                    foreach ($pamDeduDefs as $pamDeduDef) {
                    $found = false;

                    foreach ($pamPayslipDeduDefs as $pamPayslipDeduDef) {
                    if ($pamDeduDef->id === $pamPayslipDeduDef->dedu_def_id) {
                    $found = true;
                    break;
                    }
                    }

                    if (!$found) {
                    $notInPamPayslipDeduDef[] = $pamDeduDef;
                    }
                    }
                    $pamDeduDefs = $notInPamPayslipDeduDef;

                    $pamPayRunPeriods = \App\Models\PamPayRunPeriod::where('tax_year_id',
                    $pamPayslip->pamPayRun->pamTaxTable->tax_year_id)
                    ->where('period_status', 'active')->get();
                    @endphp

                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Deduction Name<span class="text-danger">*</span></label>
                            <select class="dropdown-toggle btn btn-outline-light show" name="dedu_def_id"
                                id="dedu_def_id">
                                <option value="">Select One</option>
                                @foreach($pamDeduDefs as $item)
                                <option value="{{ $item->id }}" data-code="{{ $item->pamDeduType->code }}"
                                    data-moc="{{$item->mode_of_calculation}}">
                                    {{ $item->short_description }}
                                </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>
                                    <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"
                                    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">
                                @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 )
                                    <option value="{{ $item->end_date }}">
                                        {{ $item->calendar_month}}-{{ $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>






                                            <!-- Repeat this pattern for each period up to 12 -->

                                        </div>

                                        <div class="row">
                                            <div class="mb-3 col-md-6">
                                                <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>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="copyToAllEmployees">
                                    <label class="form-check-label" for="copyToAllEmployees">
                                        Copy to all employees in this 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="submit" id="save" class="btn btn-primary btn-color">Save</button>



                </form>


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



<div class="modal fade" id="addEarnModal" 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">ADD 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.store-payslip-earn-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="pay_run_id" id="pay_run_id" value="{{ $pamPayslip->pay_run_id }}">
                    <!-- Form fields go here -->
                    <input type="hidden" name="mandatory" id="mandatory" value=1>
                    <input type="hidden" name="payroll_id" id="payroll_id"
                        value="{{ $pamPayslip->pamEmp->payroll_id }}">
                    <!-- Form fields go here -->


                    @php

                    $pamEarnDefs = \App\Models\PamEarnDef::where('status', 'active')->get();


                    $pamPayslipEarnDefs = \App\Models\PamPayslipEarnDef::where('payslip_id', $pamPayslip->id)->get();
                    // Assuming $pamEarnDefs and $pamPayslipEarnDefs are arrays of objects

                    // Create an array to store the items not present in PamPayslipEarnDef
                    $notInPamPayslipEarnDef = [];

                    // Loop through each item in PamEarnDef
                    foreach ($pamEarnDefs as $pamEarnDef) {
                    $found = false;

                    // Loop through each item in PamPayslipEarnDef and check if it matches
                    foreach ($pamPayslipEarnDefs as $pamPayslipEarnDef) {
                    if ($pamEarnDef->id === $pamPayslipEarnDef->earn_def_id) {
                    $found = true;
                    break;
                    }
                    }

                    // If the item is not found in PamPayslipEarnDef, add it to the result array
                    if (!$found) {
                    $notInPamPayslipEarnDef[] = $pamEarnDef;
                    }
                    }
                    $pamEarnDefs = $notInPamPayslipEarnDef;
                    $pamPayRunPeriods = \App\Models\PamPayRunPeriod::where('tax_year_id',
                    $pamPayslip->pamPayRun->pamTaxTable->tax_year_id)
                    ->where('period_status', 'active')->get();

                    @endphp
                    <div class="row">
                        <div class="form-group col-md-12">

                            <label class="form-label">Earning Name<span class="text-danger">*</span></label>
                            <select class="dropdown-toggle btn btn-outline-light show" name="earn_def_id"
                                id="earn_def_id">

                                <option>Select One</option>
                                @foreach($pamEarnDefs as $item)

                                <option value="{{ $item->id }}" data-earn-def-type="{{$item->pamEarnType->code}}">
                                    {{ $item->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="units">Units</label>
                            <input type="text" class="form-control" name="units" id="units" placeholder="Units">
                            @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="text" class="form-control" name="input_amount" id="input_amount"
                                placeholder="Amount">
                            @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_date">
                                <option value="">Select End Period</option>
                                @foreach($pamPayRunPeriods as $item)
                                @if($item->end_date >= $pamPayslip->pamPayRun->pamPayRunPeriod->end_date )
                                <option value="{{ $item->end_date }}">
                                    {{ $item->calendar_month}}-{{ $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="main-card mb-3 card">
                        <div class="card-body">
                            <strong>Recurrence Frequency</strong>

                            @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

                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <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-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="copyToAllEmployees">
                                    <label class="form-check-label" for="copyToAllEmployees">
                                        Copy to all employees
                                    </label>
                                </div>
                            </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</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="submit" id="save" class="btn btn-primary btn-color">Save</button>
            </form>
        </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')}}">

                <div class="modal-body">

                    @csrf
                    <div class="mb-3">

                    </div>


                    <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="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>
<div>
@foreach ($pamPayslipEarnDefsAdded as $item)
<div class="modal fade" id="deleteEarnModal-{{$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">DELETE CONFIRMATION - {{$item->earn_def_code}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to delete {{$item->pamEarnDef->short_description}}?</p>
            </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>
                <a href="{{ route('pam-payslips.destroy-payslip-earn-def', $item->id) }}" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary">Yes</a>
            </div>
        </div>
    </div>
</div>
<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 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="emp_id" id="emp_id" value="{{ $item->emp_id }}">
                    <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>
                    <button type="submit" class="btn btn-primary btn-color">Save</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 ($pamPayslipDeduDefsAdded 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" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">DELETE CONFIRMATION - {{$item->dedu_def_code}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to delete {{$item->pamDeduDef->short_description}}?</p>
            </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>
                <a href="{{ route('pam-payslips.destroy-payslip-dedu-def', $item->id) }}" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary">Yes</a>
            </div>
        </div>
    </div>
</div>
@endforeach

@endsection

@section('scripts')

<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("[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() {
    // Initialize Select2
    $('.select2').select2();

    // Show/hide inputs based on selected option
    $('#earn_def_id').change(function() {
        var selectedOption = $(this).find(':selected');
        var selectedCode = selectedOption.data('earn-def-type');


        // Assuming 'LOAN' is the code for the option you want to check
        if (selectedCode === 'OVERTIME') {
            $('#nonOvertimeInputs').hide();
            $('#loanInputs').show();

            $('#input_amount').val('0');

        } else {

            $('#nonOvertimeInputs').show();


        }
    });
});
</script>

@endsection