@extends('layouts.app')
@section('style')
    <style>
        tr.strikeout td:before {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            border-bottom: 1px solid #111;
            width: 100%;
        }
    </style>
@endsection

@section('content')
<div class="col-12">

</div>
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Payments</h5>
            <nav aria-label="breadcrumb" style="display:inline-block">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px;">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('paymentperiod') }}">Payment Period</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('payment', [ 'ppid' => $id] ) }}">Payments</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('payment.show', [ 'ppid' => $id, 'id' => $payment->id ] ) }}">{{ $personnel->last_name . ', ' . $personnel->first_name}}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit</li>
                </ol>
            </nav>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>Mode of Payment</label>
                        <select id="txtModeOfPayment" class="form-control js-example-basic-single @if ($errors->has('mode_of_payment')) is-invalid @endif" placeholder="required" name="mode_of_payment" value="{{ old('mode_of_payment') }}" >
                            <option value="CASH" @if(old('mode_of_payment') == 'CASH') selected @endif>CASH</option>
                            <option value="ATM-CBS" @if(old('mode_of_payment') == 'ATM-CBS') selected @endif>ATM-CBS</option>
                            <option value="ATM STERLING" @if(old('mode_of_payment') == 'ATM STERLING') selected @endif>ATM STERLING</option>
                            <option value="PALAWAN" @if(old('mode_of_payment') == 'PALAWAN') selected @endif>PALAWAN</option>
                            <option value="GCASH" @if(old('mode_of_payment') == 'GCASH') selected @endif>GCASH</option>
                        </select>
                        @if ($errors->has('mode_of_payment'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('mode_of_payment') }}</strong>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>Location</label>
                        <select id="txtLocation" class="form-control js-example-basic-single @if ($errors->has('location')) is-invalid @endif" placeholder="required" name="location" value="{{ old('location') }}">
                            <option value="VISMIN" @if(old('location') == 'VISMIN') selected @endif>VISMIN</option>
                            <option value="LUZON" @if(old('location') == 'LUZON') selected @endif>LUZON</option>
                        </select>
                        @if ($errors->has('location'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('location') }}</strong>
                            </div>
                        @endif
                    </div>
                </div>

                @if(count($loans) > 0)
                <p class="ml-3 mt-3 text-info">Loans</p>
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>Action</td>
                                    <td>Name</td>
                                    <td>Amount</td>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($loans as $loan)
                                <tr>
                                    <td>
                                        <button class="btn btn-danger btn-sm text-white tooltips mb-1 btnRemoveLoan" data-toggle="tooltip" data-placement="top" title="Delete" id="blr{{ $loan->id }}">
                                        <i class="fas fa-trash"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm text-white tooltips mb-1 btnAddLoan" data-toggle="tooltip" data-placement="top" title="Add" id="bla{{ $loan->id }}" style="display:none">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </td>
                                    <td id="lt{{ $loan->id }}">{{ $loan->type }}</td>
                                    <td id="dr{{ $loan->id }}">{{ $loan->deduction_rate }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif
                <p class="ml-3 mt-3 text-info">Deductions</p>
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>Action</td>
                                    <td>Name</td>
                                    <td>Amount</td>

                                </tr>
                            </thead>
                            <tbody id="tbodyDeductions">
                                @foreach ($deductions as $deduction)
                                @if($deduction->type != 0)
                                <tr id="trd{{$deduction->deduction_id}}">
                                    <td>
                                        <button class="btn btn-danger btn-sm text-white tooltips mb-1 btnRemoveDeduction" data-toggle="tooltip" data-placement="top" title="Delete" id="bdr{{ $deduction->id }}">
                                        <i class="fas fa-trash"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm text-white tooltips mb-1 btnAddDeduction" data-toggle="tooltip" data-placement="top" title="Add" id="bda{{ $deduction->id }}" style="display:none">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </td>
                                    <td  id="dx{{ $deduction->id }}">{{ $deduction->name }}</td>
                                    <td  id="dy{{ $deduction->id }}">{{ $deduction->deduction_rate }}</td>

                                </tr>
                                @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="w-100 row p-0 m-0">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Add Deduction</label>
                            <select type="number" class="form-control" id="txtAddDeduction" placeholder="optional">
                                <option id="default"></option>
                                @foreach($allDeductions as $allDeduction)
                                    @if($allDeduction->name == 'Uniform and Paraphernalia' || $allDeduction->name == 'Insurance' || $allDeduction->name == 'License /Training')
                                    <option
                                        id="opt{{$allDeduction->id}}"
                                        data-added="false"
                                        data-deduction="{{ $allDeduction->name }}"
                                        data-type="{{ $allDeduction->type }}"
                                        data-amount="{{ $allDeduction->amount }}"
                                        value="{{ $allDeduction->id }}">{{ $allDeduction->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 text-right">
                        <button type="button" href="#" class="btn btn-sm d-block btn-success ml-auto" id="btnAddDeduction" style="width: 43px !important">
                            <span class="icon text-white-50">
                                <i class="fas fa-plus"></i>
                            </span>
                        </button>
                    </div>
                </div>

                <p class="ml-3 mt-3 text-info">Adjustments</p>
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>Action</td>
                                    <td>Name</td>
                                    <td>Amount</td>
                                </tr>
                            </thead>
                            <tbody id="adjustmentTable">
                                @foreach ($adjustments as $adjustment)
                                <tr>
                                    <td>
                                        <button class="btn btn-danger btn-sm text-white tooltips mb-1 btnRemoveAdjustment" data-toggle="tooltip" data-placement="top" title="Delete" id="bar{{ $adjustment->id }}">
                                        <i class="fas fa-trash"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm text-white tooltips mb-1 btnAddAdjustment" data-toggle="tooltip" data-placement="top" title="Add" id="baa{{ $adjustment->id }}" style="display:none">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </td>
                                    <td id="ax{{ $adjustment->id }}">{{ $adjustment->label }}</td>
                                    <td id="ay{{ $adjustment->id }}">{{ $adjustment->amount }}</td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="w-100 row p-0 m-0" id="divAdjustment">
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label>Type</label>
                            <select type="number" class="form-control js-example-basic-single"  placeholder="optional" id="txtAdjType">
                                <option value="1">Additional (+)</option>
                                <option value="0">Deduction (-)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label>Adjustment Label</label>
                            <input type="text" class="form-control" placeholder="label" id="txtAdjLabel">
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label>Adjustment Amount</label>
                            <label class="sr-only" for="inlineFormInputGroup">amount</label>
                            <div class="input-group mb-2" style="height: 37px !important">
                              <div class="input-group-prepend"  style="height: 37px !important">
                                <div class="input-group-text" style="border-radius: 0 !important">₱</div>
                              </div>
                              <input type="text" class="form-control" placeholder="Amount"  id="txtAdjAmount"  style="height: 37px !important">
                            </div>
                          </div>
                    </div>
                </div>
                <div class="col-12">
                    <button type="button" class="btn btn-sm d-block ml-auto btn-success" id="btnAddMoreAdjustment" style="width: 43px !important">
                        <span class="icon text-white-50">
                            <i class="fas fa-plus"></i>
                        </span>
                    </button>
                </div>

                <p class="ml-3 mt-3 text-info">Contracts</p>
                <div class="col-12">
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Differential<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('differential')) is-invalid @endif" placeholder="required" name="differential" value="{{ old('differential', $contract->night_differential_pay) }}" id="differential">
                            @if ($errors->has('differential'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('differential') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Incentive<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('incentive')) is-invalid @endif" placeholder="required" name="incentive" value="{{ old('incentive', $contract->incentive_pay) }}" id="incentive">
                            @if ($errors->has('incentive'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('incentive') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Uniform<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('uniform')) is-invalid @endif" placeholder="required" name="uniform" value="{{ old('uniform', $contract->uniform_allowance) }}" id="uniform">
                            @if ($errors->has('uniform'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('uniform') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Overtime<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('overtime')) is-invalid @endif" placeholder="required" name="overtime" value="{{ old('overtime', $contract->overtime_pay) }}" id="overtime">
                            @if ($errors->has('overtime'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('overtime') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>SSS Contribution<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('sss_contribution')) is-invalid @endif" placeholder="required" name="sss_contribution" value="{{ old('sss_contribution', $contract->sss_contribution) }}" id="sss_contribution">
                            @if ($errors->has('sss_contribution'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('sss_contribution') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Philhealth Contribution<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('philhealth_contribution')) is-invalid @endif" placeholder="required" name="philhealth_contribution" value="{{ old('philhealth_contribution', $contract->philhealth_contribution) }}" id="philhealth_contribution">
                            @if ($errors->has('philhealth_contribution'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('philhealth_contribution') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Pag-ibig Contribution Contribution<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('pag_ibig_contribution')) is-invalid @endif" placeholder="required" name="pag_ibig_contribution" value="{{ old('pag_ibig_contribution', $contract->pag_ibig_contribution) }}" id="pag_ibig_contribution">
                            @if ($errors->has('pag_ibig_contribution'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('pag_ibig_contribution') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Retirement Benefit<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('retirement_benefit')) is-invalid @endif" placeholder="required" name="retirement_benefit" value="{{ old('retirement_benefit', $contract->retirement_benefit) }}" id="retirement_benefit">
                            @if ($errors->has('retirement_benefit'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('retirement_benefit') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>Thirteenth Month<span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if ($errors->has('thirteenth_month')) is-invalid @endif" placeholder="required" name="thirteenth_month" value="{{ old('thirteenth_month', $contract->thirteenth_month_pay) }}" id="thirteenth_month">
                            @if ($errors->has('thirteenth_month'))
                                <div class="invalid-feedback">
                                    <strong>{{ $errors->first('thirteenth_month') }}</strong>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <button type="submit" class="d-block d-md-none ml-auto btn btn-md btn-primary btn-block btnSave">
                        <span class="icon text-white-50">
                            <i class="fas fa-save"></i>
                        </span>
                        &nbsp;Save
                    </button>
                    <button type="submit" class="d-none d-md-block ml-auto btn btn-md btn-primary btn-block btnSave" style="width: 155px">
                        <span class="icon text-white-50">
                            <i class="fas fa-save"></i>
                        </span>
                        &nbsp;Save
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="mdlConfirmation">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">C O N F I R M A T I O N</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-secondary">
          <p>Continue updating this payment?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" id="btnConfirmSave">Confirm</button>
        </div>
      </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="mdlUpdateSuccess">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-success pb-0">
            <h5 class="text-white">SUCCESS!</h5>
        </div>
        <div class="modal-body text-secondary">
          <p>Payment was updated successfully.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" id="btnContinue">Continue</button>
        </div>
      </div>
    </div>
</div>
@section('script')
<script>
    $(document).ready(function() {
        notif = {
            misc: {
            navbar_menu_visible: 0
            },

            showNotification: function(from, align, color, msg) {

            $.notify({
                icon: "now-ui-icons ui-1_bell-53",
                message: msg

            }, {
                type: color,
                timer: 8000,
                placement: {
                from: from,
                align: align
                }
            });
            }
        };

        $("#txtAddDeduction").select2({
            theme: "bootstrap4"
        });

        let loans = [];
        let deductions = [];
        let adjustments = [];

        @foreach ($loans as $loan)
        loans.push({
            apply: 1,
            id: {{ $loan->id }}
        })
        @endforeach

        $('.btnRemoveLoan').click(function(){
            let id = $(this).attr('id').substring(3);

            let ltContent = $('#lt' + id).html();
            let drContent = $('#dr' + id).html();
            $('#lt' + id).html(ltContent.strike());
            $('#dr' + id).html(drContent.strike());

            $('#blr' + id).hide();
            $('#bla' + id).show();

            var index = loans.findIndex(p => p.id == id);
            loans[index].apply = 0;
        });

        $('.btnAddLoan').click(function(){
            let aid = $(this).attr('id').substring(3);
            let ltContent = $('#lt' + aid).children().html();
            let drContent = $('#dr' + aid).children().html();
            $('#lt' + aid).html(ltContent);
            $('#dr' + aid).html(drContent);

            $('#bla' + aid).hide();
            $('#blr' + aid).show();

            var index = loans.findIndex(p => p.id == aid);
            loans[index].apply = 1;
        });

        @foreach ($deductions as $deduction)
        @if($deduction->type != 0)
        deductions.push({
            id: {{ $deduction->id }},
            deduction_id: {{ $deduction->deduction_id }},
            name: '{{ $deduction->name }}',
            type: {{ $deduction->type }},
            deduction_rate: {{ $deduction->deduction_rate }},
            apply: 1,
        })
        $('#opt{{$deduction->deduction_id}}').attr("data-added", 'true')
        @endif
        @endforeach

        $('#btnAddDeduction').click(function(){
            let newDeduction = $('#txtAddDeduction').val()
            if(newDeduction == '') {
                notif.showNotification('top','right', 'danger', 'Please select a deduction to add')
            } else if($('#opt' + newDeduction).attr("data-added") == 'true') {
                notif.showNotification('top','right', 'danger', 'Deduction is already added')
            } else {
                let amount = $('#opt' + newDeduction).attr("data-amount")
                let name = $('#opt' + newDeduction).attr("data-deduction")
                let type = $('#opt' + newDeduction).attr("data-type")

                $('#tbodyDeductions').append(
                    '<tr id="addDeduction' + newDeduction + '">' +
                        '<td>' +
                        '<button class="btn btn-danger btn-sm text-white tooltips mb-1 btnRemoveDeduction" data-toggle="tooltip" data-placement="top" title="Delete" id="bdr' + newDeduction + '">' +
                        '<i class="fas fa-trash"></i>' +
                        '</button>' +
                        '<button class="btn btn-success btn-sm text-white tooltips mb-1 btnAddDeduction" data-toggle="tooltip" data-placement="top" title="Add" id="bda' + newDeduction + '" style="display:none">' +
                            '<i class="fas fa-plus"></i>' +
                        '</button>' +
                        '</td>' +
                        '<td id="dx' + newDeduction + '">' + name + '</td>' +
                        '<td id="dy' + newDeduction + '" class="deductionAmount">' + amount + '</td>' +
                    '</tr>'
                );

                deductions.push({
                    id: 0,
                    deduction_id: newDeduction,
                    name: name,
                    type: type,
                    deduction_rate: amount,
                    apply: 1,
                })

                $('.btnRemoveDeduction').click(function(){
                    let id = $(this).attr('id').substring(3);

                    let ltContent = $('#dx' + id).html();
                    let drContent = $('#dy' + id).html();
                    $('#dx' + id).html(ltContent.strike());
                    $('#dy' + id).html(drContent.strike());

                    $('#bdr' + id).hide();
                    $('#bda' + id).show();

                    var index = deductions.findIndex(p => p.deduction_id == id);
                    deductions[index].apply = 0;
                });

                $('.btnAddDeduction').click(function(){
                    let id = $(this).attr('id').substring(3);

                    let ltContent = $('#dx' + id).children().html();
                    let drContent = $('#dy' + id).children().html();
                    $('#dx' + id).html(ltContent);
                    $('#dy' + id).html(drContent);

                    $('#bdr' + id).show();
                    $('#bda' + id).hide();

                    var index = deductions.findIndex(p => p.deduction_id == id);
                    deductions[index].apply = 1;
                });

                $('#opt' + newDeduction).attr("data-added", 'true')
            }
        });


        $('.btnRemoveDeduction').click(function(){
            let id = $(this).attr('id').substring(3);

            let ltContent = $('#dx' + id).html();
            let drContent = $('#dy' + id).html();
            $('#dx' + id).html(ltContent.strike());
            $('#dy' + id).html(drContent.strike());

            $('#bdr' + id).hide();
            $('#bda' + id).show();

            var index = deductions.findIndex(p => p.id == id);
            deductions[index].apply = 0;
        });

        $('.btnAddDeduction').click(function(){
            let id = $(this).attr('id').substring(3);

            let ltContent = $('#dx' + id).children().html();
            let drContent = $('#dy' + id).children().html();
            $('#dx' + id).html(ltContent);
            $('#dy' + id).html(drContent);

            $('#bdr' + id).show();
            $('#bda' + id).hide();

            var index = deductions.findIndex(p => p.id == id);
            deductions[index].apply = 1;
        });

        @foreach ($adjustments as $adjustment)
        adjustments.push({
            id: {{ $adjustment->id }},
            label: '{{ $adjustment->label }}',
            amount: {{ $adjustment->amount }},
            apply: 1,
            oldData: 1
        })
        @endforeach

        let adjCounter = 0;
        $('#btnAddMoreAdjustment').click(function(){
            let amount = currency($('#txtAdjAmount').val()).value;
            let label = $('#txtAdjLabel').val();
            let type = $('#txtAdjType').val();

            if(label == '') {
                notif.showNotification('top','right', 'danger', 'Adjustment Label is required');
            } else if(amount <= 0) {
                notif.showNotification('top','right', 'danger', 'Adjustment Amount is not valid');
            } else {
                if(type == 0) {
                    amount = $('#txtAdjAmount').val() * -1
                    amount = currency(amount).value;
                }
                $('#adjustmentTable').append(
                    '<tr>' +
                        '<td>' +
                        '<button class="btn btn-danger btn-sm text-white tooltips mb-1 btnRemoveAdjustment" data-toggle="tooltip" data-placement="top" title="Delete" id="bar' + adjCounter + '">' +
                        '<i class="fas fa-trash"></i>' +
                        '</button>' +
                        '<button class="btn btn-success btn-sm text-white tooltips mb-1 btnAddAdjustment" data-toggle="tooltip" data-placement="top" title="Add" id="baa' + adjCounter + '" style="display:none">' +
                            '<i class="fas fa-plus"></i>' +
                        '</button>' +
                        '</td>' +
                        '<td id="ax' + adjCounter + '">' + label + '</td>' +
                        '<td id="ay' + adjCounter + '" class="adjAmount">' + amount + '</td>' +
                    '</tr>'
                );

                adjustments.push({
                    id: adjCounter,
                    label: label,
                    amount: amount,
                    apply: 1,
                    oldData: 0
                })

                $('.btnRemoveAdjustment').click(function(){
                    let id = $(this).attr('id').substring(3);

                    let ltContent = $('#ax' + id).html();
                    let drContent = $('#ay' + id).html();
                    $('#ax' + id).html(ltContent.strike());
                    $('#ay' + id).html(drContent.strike());

                    $('#baa' + id).show();
                    $('#bar' + id).hide();

                    var index = adjustments.findIndex(p => p.id == id);
                    adjustments[index].apply = 0;
                });

                $('.btnAddAdjustment').click(function(){
                    let id = $(this).attr('id').substring(3);

                    let ltContent = $('#ax' + id).children().html();
                    let drContent = $('#ay' + id).children().html();
                    $('#ax' + id).html(ltContent);
                    $('#ay' + id).html(drContent);

                    $('#baa' + id).hide();
                    $('#bar' + id).show();

                    var index = adjustments.findIndex(p => p.id == id);
                    adjustments[index].apply = 1;
                });

                adjCounter++;
                $('#txtAdjLabel').val('');
                $('#txtAdjAmount').val('');
                $('#txtAdjType').val('1').trigger('change')
            }
        });

        $('.btnRemoveAdjustment').click(function(){
            let id = $(this).attr('id').substring(3);

            let ltContent = $('#ax' + id).html();
            let drContent = $('#ay' + id).html();
            $('#ax' + id).html(ltContent.strike());
            $('#ay' + id).html(drContent.strike());

            $('#baa' + id).show();
            $('#bar' + id).hide();

            var index = adjustments.findIndex(p => p.id == id);
            adjustments[index].apply = 0;
        });

        $('.btnAddAdjustment').click(function(){
            let id = $(this).attr('id').substring(3);

            let ltContent = $('#ax' + id).children().html();
            let drContent = $('#ay' + id).children().html();
            $('#ax' + id).html(ltContent);
            $('#ay' + id).html(drContent);

            $('#baa' + id).hide();
            $('#bar' + id).show();

            var index = adjustments.findIndex(p => p.id == id);
            adjustments[index].apply = 1;
        });

        $('.btnSave').click(function() {
            $('#mdlConfirmation').modal('show');
        });

        $('#btnConfirmSave').click(function() {
            loader();
            $.ajax({
                url : "{{ route( 'payment.update', ['ppid' => $id] ) }}",
                data: {
                    '_token': '{{ csrf_token() }}',
                    pid : {{ $payment->id }},
                    loans: loans,
                    deductions: deductions,
                    adjustments: adjustments,
                    mode_of_payment: $('#txtModeOfPayment').val(),
                    location: $('#txtLocation').val(),
                    differential: $('#differential').val(),
                    incentive: $('#incentive').val(),
                    uniform: $('#uniform').val(),
                    overtime: $('#overtime').val(),
                    sss_contribution: $('#sss_contribution').val(),
                    philhealth_contribution: $('#philhealth_contribution').val(),
                    pag_ibig_contribution: $('#pag_ibig_contribution').val(),
                    retirement_benefit: $('#retirement_benefit').val(),
                    thirteenth_month: $('#thirteenth_month').val(),
                },
                type: 'post',
                dataType: 'json',
                success: function( response )
                {
                    if(response.code == 200) {
                        $('#mdlConfirmation').modal('hide');
                        unloader()
                        $('#mdlUpdateSuccess').modal('show')
                    } else {
                        $('#mdlConfirmation').modal('hide');
                        unloader()
                        notif.showNotification('top','right', 'danger', response.msg)
                    }

                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'All input in contracts must atleast have atleast 0.')
                    $('#mdlConfirmation').modal('hide');
                    unloader();
                }
            });
        });

        $('#btnContinue').click(function() {
            window.location.href = "{{ route('payment.show', ['ppid' => $id, 'id' => $payment->id ])}}";
        });
    });
</script>
@endsection
@endsection