@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>
    @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-loans.index') }}"> <i class="fa fa-arrow-left"></i></a>
        <div class="text-center">
            <h4 class="c-grey-900 mB-20"> {{ strtoupper($pamLoan->pamDeduDef->short_description)}} STATEMENT FOR {{strtoupper($pamEmp->pamHRUser->first_name)}} {{strtoupper($pamEmp->pamHRUser->last_name)}}</h4>
        </div>

        <a href="{{ route('pam-payslips.pdf-payslip',[$pamEmp->id,$pamEmp->pamPayroll->current_pay_run_id]) }}"
            class="btn-shadow btn btn-success btn-color pull-right">View Payslip</a>


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

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="first_name">Employee Name : {{ $pamEmp->pamHRUser->first_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="national_id">National ID : {{ $pamEmp->pamHRUser->nrc }}</label>
                        </div>
                        <div class="form-group">
                            <label for="man_number">Employee Number : {{ $pamEmp->pamHRUser->man_number }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Date of Birth : {{ $pamEmp->pamHRUser->date_of_birth }}</label>
                        </div>
                        <div class="form-group">
                            <label for="basic_pay">Basic Pay : {{ $pamEmp->basic_pay }} </label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Status  : {{ $pamEmp->status}}</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="national_id">Loan Name : {{ $pamLoan->pamDeduDef->short_description }}</label>
                        </div>
                        <div class="form-group">
                            <label for="man_number">Loan Amount : {{ $pamLoan->loan_amount }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Recovered Amount  : {{ $pamLoan->total_paid_to_date}}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Loan Balance  : {{ $pamLoan->loan_balance_amount}}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Loan Tenure  : {{ $pamLoan->tenure}}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Monthly Instalment  : {{ $pamLoan->monthly_instalment}}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_birth">Status  : {{ $pamLoan->status}}</label>
                        </div>
                      
                    </div>
                    <div class="col-md-4">
                    <div class="form-group">
                            <label for="date_of_employment">Start Period  : {{ $pamLoan->start_date }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_employment">Date Created : {{ $pamLoan->created_at }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_employment"> Created By : {{ $pamLoan->created_by }}</label>
                        </div>
                      
                        <div class="form-group">
                            <label for="date_of_employment">End Period : {{ $pamLoan->end_date }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_employment">Date Updated : {{ $pamLoan->updated_at }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_employment"> Updated By : {{ $pamLoan->updated_by }}</label>
                        </div>
                        <div class="form-group">
                            <label for="date_of_employment">Last Payment Date : {{ $pamLoan->last_payment_date }}</label>
                        </div>
                  
                    
                    </div>

                </div>

            </div>

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

<div class="main-card mb-3 card">
    <div class="card-body">
  
        <table style="width: 100%;" id="dataTablePaidLoans"
            class="display nowrap table table-hover table-striped table-bordered">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Emp No</th>
                            <th>Employee Name</th>
                            <th>Loan Name</th>
                    <th>Payment Date</th>
                    <th>Payroll Period</th>
                    <th>Amount Paid</th>
                    <th>Reference</th>
                    <th>Processed By</th>

                </tr>
            </thead>
            <tbody>
                @php
                $c=0;
                @endphp
                @foreach($pamLoanPayments as $item)
                <tr>
                    <td>{{ ++$c }}</td> 
                    <td>{{ $item->pamEmp->pamHRUser->man_number }}</td>
                            <td>{{ $item->pamEmp->pamHRUser->first_name }} {{ $item->pamEmp->pamHRUser->last_name }} </td>
                            <td>{{ $item->pamDeduDef->short_description }}</td>
                          
                    <td>{{ $item->payment_date}}</td>
                    <td>{{ $item->payment_period}}</td>
                    <td>{{ $item->amount }}</td>
                    <td>{{$item->payment_reference}}</td>
                    <td>{{ $item->created_by}}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

    </div>
</div>
@endsection


@section('scripts')

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

    // Show/hide inputs based on selected option
    $('#dedu_def_id').change(function() {
        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') {
                $('#units').val('1');
                $('#input_amount').val('0');
                $('#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