@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 pl-5">
            <h5 class="title ">Payment</h5>
            <nav aria-label="breadcrumb">
                <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 active" aria-current="page">New</li>
                </ol>
            </nav>
        </div>
        <div class="card-body all-icons">
            <div class="row  pr-5 pl-5">

                <div class="col-12">
                    <div class="form-group">
                        <label>Personnel</label>
                        <select type="number" id="txtPersonnel" class="form-control js-example-basic-single @if ($errors->has('personnel')) is-invalid @endif" placeholder="required" name="personnel" value="{{ old('personnel') }}">
                            <option value="default"></option>
                            @foreach($personnels as $personnel)
                                <option value="{{ $personnel->id }}" @if(old('personnel') == $personnel->id) selected @endif>{{ $personnel->last_name . ', ' . $personnel->first_name }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('personnel'))
                            <div class="invalid-feedback">
                                <strong>{{ $errors->first('personnel') }}</strong>
                            </div>
                        @endif
                    </div>
                </div>

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

                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>Bank Name</label>
                        <input type="text" class="form-control"  id="txtBankName" readonly>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>Bank Account</label>
                        <input type="text" class="form-control"  id="txtBankAccount" readonly>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label>Bank Number</label>
                        <input type="text" class="form-control"  id="txtBankNumber" readonly>
                    </div>
                </div>

                <div class="col-12">
                    <hr />
                </div>

                <div class="col-12" id="dtrView" style="display: none;">
                    <div class="text-right">
                        <p>
                            <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Detailed View</button>
                        </p>
                    </div>
                    <div class="collapse multi-collapse" id="multiCollapseExample2">
                        <div class="card card-body  p-0">
                            <p class="ml-3 mt-3 text-info">DTR Detailed View</p>
                            <div class="col-12" id="dtrTable">
                            </div>
                        </div>
                    </div>
                    <div class="card card-body p-0">
                        <p class="ml-3 mt-3 text-info">DTR</p>
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    </thead>
                                        <tr>
                                            <th>Post</th>
                                            <th>Total WD</th>
                                            <th>Amount</th>
                                            <th>Total OT</th>
                                            <th>Amount</th>
                                            <th>Total</th>
                                        </tr>
                                    <tbody  id="dtrTableSimple">
                                    </tbody>
                                    <tfoot  id="dtrTableSimpleTfoot">
                                    </tfoot>
                                    </table>
                                </div>
                        </div>
                    </div>
                </div>

                <div class="card m-3" id="loanView" style="display: none;">
                    <p class="ml-3 mt-3 text-info">Loans</p>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                </thead>
                                    <tr>
                                        <th></th>
                                        <th>Type</th>
                                        <th>Current Balance</th>
                                        <th>Deduction Rate</th>
                                    </tr>
                                <tbody  id="loansTable">
                                </tbody>
                                <tfoot  id="loansTableFooter">
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- <div class="card m-3" id="loanView">
                    <p class="ml-3 mt-3 text-info">Savings</p>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                </thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Deduction Rate</th>
                                    </tr>
                                <tbody>
                                    <tr>
                                        <td>Cash Bond</td>
                                        <th>₱50.00</th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> --}}

                <div class="card m-3 pb-4">
                    <p class="ml-3 mt-3 text-info">Deductions</p>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Deduction</th>
                                        <th>Type</th>
                                        <th>Deduction Rate</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-secondary btnRemoveLoan" style="width: 25px !important; height: 25px !important; padding: 5px" disabled>
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-lock"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td>Cash Bond</td>
                                        <td>Savings</td>
                                        <td class="deductionAmount">50</td>
                                    </tr>
                                    {{-- @foreach ($contributions as $contribution)
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-xs btn-secondary btnRemoveLoan" style="width: 25px !important; height: 25px !important; padding: 5px" disabled>
                                                    <span class="icon text-white-50">
                                                        <i class="fas fa-lock"></i>
                                                    </span>
                                                </button>
                                            </td>
                                            <td>{{ $contribution->name }}</td>
                                            <td>Contribution</td>
                                            <td class="deductionAmount">{{ $contribution->amount }}</td>
                                        </tr>
                                    @endforeach --}}
                                </thead>
                                <tbody id="tbodyDeductions">

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <th id="gtDeductionTotal"></th>
                                    </tr>
                                </tfoot>
                            </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($notContributions as $notCont)
                                        @if($notCont->name == 'Uniform and Paraphernalia' || $notCont->name == 'Insurance' || $notCont->name == 'License /Training')
                                        <option
                                            id="opt{{$notCont->id}}"
                                            data-added="false"
                                            data-deduction="{{ $notCont->name }}"
                                            data-type="{{ $notCont->type }}"
                                            data-amount="{{ $notCont->amount }}"
                                            value="{{ $notCont->id }}">{{ $notCont->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>
                </div>

                <div class="card m-3 pb-3">
                    <p class="ml-3 mt-3 text-info">Adjustment</p>
                    <div class="col-12" id="adjustmentTableDiv" style="display: none">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                </thead>
                                    <tr>
                                        <th></th>
                                        <th>Type</th>
                                        <th>Label</th>
                                        <th>Amount</th>
                                    </tr>
                                <tbody  id="adjustmentTable">
                                </tbody>
                                <tfoot  id="adjustmentTableFooter">
                                    <tr>
                                        <td colspan="3"></td>
                                        <th id="adjGrandTotal"></th>
                                    </tr>
                                </tfoot>
                            </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="btnAddAdjustment" style="width: 43px !important">
                            <span class="icon text-white-50">
                                <i class="fas fa-plus"></i>
                            </span>
                        </button>
                    </div>
                </div>

                <div class="card m-3 pb-4">
                    <p class="ml-3 mt-3 text-info">Contracts</p>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Type</th>
                                        <th></th>
                                        <th>Amount</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC1">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC1" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC1T">Differential</td>
                                        <th>
                                            <span class="icon text-success">
                                                <i class="fas fa-plus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtNightDif"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC2">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC2" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC2T">Incentive</td>
                                        <th>
                                            <span class="icon text-success">
                                                <i class="fas fa-plus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtIncentive"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC3">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC3" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC3T">Uniform</td>
                                        <th>
                                            <span class="icon text-success">
                                                <i class="fas fa-plus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtUniform"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC4">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC4" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC4T">Overtime</td>
                                        <th>
                                            <span class="icon text-success">
                                                <i class="fas fa-plus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtOvertime"  style="height: 37px !important">
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC7">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC7" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC7T">SSS Contribution</td>
                                        <th>
                                            <span class="icon text-danger">
                                                <i class="fas fa-minus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtSCont"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC8">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC8" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC8T">Philhealth Contribution</td>
                                        <th>
                                            <span class="icon text-danger">
                                                <i class="fas fa-minus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtPhilhealthCont"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC9">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC9" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC9T">Pag-ibig Contribution</td>
                                        <th>
                                            <span class="icon text-danger">
                                                <i class="fas fa-minus"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control txtForCon" placeholder="Amount"  id="txtPagIbigCont"  style="height: 37px !important">
                                        </td>
                                    </tr>


                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC6">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC6" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button>
                                        </td>
                                        <td id="btnRmC6T">Retirement Benefit</td>
                                        <th>
                                            <span class="icon text-secondary">
                                                <i class="fas fa-eye-slash"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control " placeholder="Amount"  id="txtRetirment"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {{-- <button type="button" class="btn btn-xs btn-danger btnRemoveContract" style="width: 25px !important; height: 25px !important; padding: 5px" id="btnRmC5">
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-xs btn-success " style="width: 25px !important; height: 25px !important; padding: 5px; display: none" id="btnAddC5" >
                                                <span class="icon text-white-50">
                                                    <i class="fas fa-plus"></i>
                                                </span>
                                            </button> --}}
                                        </td>
                                        <td id="btnRmC5T">Thirteenth Month</td>
                                        <th>
                                            <span class="icon text-secondary">
                                                <i class="fas fa-eye-slash"></i>
                                            </span>
                                        </th>
                                        <td>
                                            <input type="number" class="form-control " placeholder="Amount"  id="txtThirteenth"  style="height: 37px !important">
                                        </td>
                                    </tr>
                                </thead>
                                <tbody id="tbodyDeductions">

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <th id="gtDeductionTotal"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="card m-3 pb-3">
                    <p class="ml-3 mt-3 text-info">Summarry</p>
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                </thead>
                                    <tr>
                                        <th>Label</th>
                                        <th>Amount</th>
                                    </tr>
                                <tbody>
                                    <tr>
                                        <td>DTR</td>
                                        <td id="totalDtr" class="sumgtDtr">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Loans</td>
                                        <td id="totalLoans" class="sumgt">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Deductions</td>
                                        <td id="totalDeductions" class="sumgt">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Adjustment</td>
                                        <td id="totalAdjustments" class="sumgtAdjustment">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>Contracts</td>
                                        <td id="totalContracts" class="sumgtContracts">0.00</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Total Payment</th>
                                        <th id="grandTotalPayment">0.00</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </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 saving this payment?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" id="btnConfirmSave">Confirm</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
                    }
                });
                }
            };
            @if(session()->has('message.level'))
                notif.showNotification('top','right', '{{ session('message.level') }}', '{{ session('message.content') }}')
            @endif

            $(".selector").flatpickr();

            function formSubmit() {
                loader();
                return true;
            }
            $("#txtAddDeduction").select2({
                theme: "bootstrap4"
            });

            let personnel;
            let posts = [];
            let fLoans = [];
            let fDeductions = [];
            let fAdjustment = [];
            let fContributions = [];

            @foreach ($contributions as $contribution)
                data = {
                    id: {{ $contribution->id }},
                    name :  '{{ $contribution->name }}',
                    type: 4,
                    deduction_rate: {{ $contribution->amount }}
                }
                fContributions.push(data)
            @endforeach

            function resetTable() {
                $("#dtrTable").empty();
                $("#dtrTableSimple").empty();
                $("#dtrTableSimpleTfoot").empty();
                $("#loansTable").empty();
                $("#loansTableFooter").empty();
                $('#tbodyDeductions').empty();
                $('#adjustmentTable').empty();
                $('#totalDtr').html('0')
                $('#totalLoans').html('0')
                $('#dtrView').hide();
                $('#loanView').hide();
                posts = [];
                fLoans = [];
                personnel = '';
                fDeductions = [];
                fAdjustment = [];
                calcDeductionGrandTotal()
                calcAdjGrandTotal()
                finalCalculation()

                $('#txtBankName').val('')
                $('#txtBankAccount').val('')
                $('#txtBankNumber').val('')

            }

            var totalContract = 0
            var totolNumberOfWorkDays = 0
            var totolNumberOfOt = 0
            var totalNightRate = 0

            $('#txtPersonnel').on('select2:select', function (e) {
                selectData = e.params.data;
                loader()
                $.ajax({
                        url : "{{ route( 'payment.calcdtr' ) }}",
                        data: {
                            '_token': '{{ csrf_token() }}',
                            start: '{{ $pp->start_date }}',
                            end: '{{ $pp->end_date }}',
                            personnel_id: selectData.id
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function( response )
                        {
                            resetTable();
                            let result = response.result
                            let gt = 0;
                            totalNightRate = response.nightSeconds / 3600
                            //console.log(totalNightRate)
                            if(result.length > 0) {
                                personnel = selectData.id
                                $.each(result, function(i, item) {
                                    populatePaymentSimple(item);
                                    populatePayment(item);
                                    let ot = currency(item.over_time_total_amount).value;
                                    let wd = currency(item.wd_total_amount).value;
                                    let grandTotal = ot + wd;
                                    gt = gt + grandTotal;

                                    totolNumberOfWorkDays = totolNumberOfWorkDays + item.wd_total
                                    totolNumberOfOt = totolNumberOfOt + item.over_time_total
                                });
                                gt = currency(gt, {symbol : '₱'}).format();
                                if(result.length > 1) {
                                    populatePaymentSimpleTfoot(gt);
                                }

                                sumgGt = gt = currency(gt, {symbol : ''}).format();

                                $('#totalDtr').html(sumgGt)
                                $('#dtrView').show();
                                populateLoans(response.loans);

                                miscWd = response.nightOrDay == 1 ? 15 : 16
                                console.log('ttwds ' + miscWd)

                                let incentive = (((response.contract_misc.incentive_pay / 2) / miscWd) * totolNumberOfWorkDays).toFixed(2);
                                let uniform = (((response.contract_misc.uniform_allowance / 2) / miscWd) * totolNumberOfWorkDays).toFixed(2);
                                let thirteenth = (((response.contract_misc.thirteenth_month_pay / 2) / miscWd) * totolNumberOfWorkDays).toFixed(2);
                                let retirment = (((response.contract_misc.retirement_benefit / 2) / miscWd) * totolNumberOfWorkDays).toFixed(2);


                                totalContract = totalContract + parseFloat(response.contract_misc.night_differential_pay * totalNightRate)

                                totalContract = totalContract + parseFloat(incentive)
                                totalContract = totalContract + parseFloat(uniform)
                                // totalContract = totalContract + parseFloat(thirteenth)
                                // totalContract = totalContract + parseFloat(retirment)

                                totalContract = totalContract + parseFloat(response.contract_misc.overtime_pay * totolNumberOfOt)
                                console.log(totalContract)

                                totalContract = totalContract - parseFloat(response.contract_misc.sss_contribution)
                                totalContract = totalContract - parseFloat(response.contract_misc.philhealth_contribution)
                                totalContract = totalContract - parseFloat(response.contract_misc.pag_ibig_contribution)
                                contractTotal()

                                //console.log(totalContract)
                                console.log(response.contract_misc.uniform_allowance)

                                $('#txtNightDif').val((response.contract_misc.night_differential_pay * totalNightRate).toFixed(2));



                                $('#txtIncentive').val(incentive);
                                $('#txtUniform').val(uniform);

                                // $('#txtNightDif').val(response.contract_misc.night_differential_pay);

                                // $('#txtIncentive').val(response.contract_misc.incentive_pay);
                                // $('#txtUniform').val(response.contract_misc.uniform_allowance);

                                $('#txtOvertime').val(response.contract_misc.overtime_pay * totolNumberOfOt);


                                $('#txtThirteenth').val(thirteenth);
                                $('#txtRetirment').val(retirment);

                                $('#txtSCont').val(response.contract_misc.sss_contribution);
                                $('#txtPhilhealthCont').val(response.contract_misc.philhealth_contribution);
                                $('#txtPagIbigCont').val(response.contract_misc.pag_ibig_contribution);


                                $('#txtModeOfPayment').val(response.personnel.mode_of_payment).change();
                                $('#txtLocation').val(response.personnel.location).change();

                                $('#txtBankName').val(response.personnel.bank_name);
                                $('#txtBankAccount').val(response.personnel.account_name);
                                $('#txtBankNumber').val(response.personnel.account_number);
                            } else {
                                notif.showNotification('top','right', 'danger', 'This personnel has no DTR during this payment period')
                                $('#txtPersonnel').val('default');
                                $('#txtPersonnel').trigger('change');
                                unloader()
                            }




                            unloader()
                        },
                        error: function()
                        {
                            notif.showNotification('top','right', 'danger', 'Something went wrong')
                            unloader();
                        }
                    });
            });

            function populateLoans(loans) {
                let total = 0;
                $.each(loans, function(i, loan) {

                    let loanName = loan.type;
                    // if(loan.type == 1) {
                    //     loanName = 'SSS';
                    // } else if(loan.type == 2) {
                    //     loanName = 'Pag-Ibig';
                    // } else if(loan.type == 3) {
                    //     loanName = 'Cash Advance';
                    // } else {
                    //     loanName = 'Office Loan';
                    // }

                    let dr = loan.deduction_rate;
                    if(currency(loan.current_balance).value < currency(loan.deduction_rate).value) {
                        dr = loan.current_balance;
                    }
                    total = total + currency(dr).value;

                    let data = {
                        apply: 1,
                        id: loan.id,
                        type: loan.type,
                        deduction_rate: dr,
                        current_balance: loan.current_balance
                    }
                    fLoans.push(data)

                    $('#loansTable').append(
                        '<tr id="trl' + i + '">' +
                            '<td id="bt' + i + '">' +
                                '<button type="button" id="blr' + i + '" class="btn btn-xs btn-danger btnRemoveLoan" style="width: 25px !important; height: 25px !important; padding: 5px">' +
                                    '<span class="icon text-white-50">' +
                                        '<i class="fas fa-times"></i>' +
                                    '</span>' +
                                '</button>' +
                                '<button type="button" id="bla' + i + '" class="btn btn-xs btn-success btnAddLoan" style="width: 25px !important; height: 25px !important; padding: 5px; display: none">' +
                                    '<span class="icon text-white-50">' +
                                        '<i class="fas fa-plus"></i>' +
                                    '</span>' +
                                '</button>' +
                            '</td>' +
                            '<td id="lt' + i + '">' + loanName + '</td>' +
                            '<td id="cb' + i + '">' + currency(loan.current_balance, {symbol : ''}).format() + '</td>' +
                            '<td id="dr' + i + '">' + currency(dr, {symbol : ''}).format() + '</td>' +
                        '</tr>'
                    );
                });
                total = currency(total, {symbol : '₱'}).format();
                $('#loansTableFooter').append(
                    '<tr>' +
                        '<td colspan="3"></td>' +
                        '<th id="totalLoan">' + total + '</th>' +
                    '</tr>'
                );

                sumTotal = currency(total, {symbol : ''}).format();
                $('#totalLoans').html(sumTotal);
                finalCalculation();


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

                $('.btnRemoveLoan').click(function(){
                    let id = $(this).attr('id').substring(3);
                    let ltContent = $('#lt' + id).html();
                    let cbContent = $('#cb' + id).html();
                    let drContent = $('#dr' + id).html();
                    $('#lt' + id).html(ltContent.strike());
                    $('#cb' + id).html(cbContent.strike());
                    $('#dr' + id).html(drContent.strike());

                    deductionAmount = currency(drContent).value;
                    total = currency(total).value - deductionAmount;
                    total = currency(total, {symbol : '₱'}).format();

                    sumTotal = currency(total, {symbol : ''}).format();
                    $('#totalLoans').html(sumTotal);

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

                    fLoans[id].apply = 0;
                });

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

                    deductionAmount = currency(drContent).value;
                    total = currency(total).value + deductionAmount;
                    total = currency(total, {symbol : '₱'}).format();

                    sumTotal = currency(total, {symbol : ''}).format();
                    $('#totalLoans').html(sumTotal);

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

                    fLoans[aid].apply = 1;
                });
            }

            function populatePaymentSimpleTfoot(item) {
                $('#dtrTableSimpleTfoot').append(
                    '<tr>' +
                        '<td colspan="5"></td>' +
                        '<th>' + item  +'</th>' +
                    '</tr>'
                )
            }

            function populatePaymentSimple(item) {
                let ot = currency(item.over_time_total_amount).value;
                let wd = currency(item.wd_total_amount).value;
                let grandTotal = ot + wd;
                grandTotal = currency(grandTotal, {symbol : '₱'}).format();
                $('#dtrTableSimple').append(
                    '<tr>' +
                        '<td>' + item.branch_name  +'</td>' +
                        '<td>' + item.wd_total  +'</td>' +
                        '<td>' + item.wd_total_amount  +'</td>' +
                        '<td>' + item.over_time_total  +'</td>' +
                        '<td>' + item.over_time_total_amount  +'</td>' +
                        '<th>' + grandTotal  +'</th>' +
                    '</tr>'
                )
            }

            function populatePayment(item) {
                posts.push(item);
                $('#dtrTable').append(
                    '<div class="table-responsive">' +
                    '<table class="table">' +
                            '<tbody>' +
                                '<tr>' +
                                    '<th colspan="7">' + item.branch_name + '</th>' +
                                '</tr>' +
                                '<tr>' +
                                    '<th></th>' +
                                    '<th>Days</th>' +
                                    '<th>Rate</th>' +
                                    '<th>Amount</th>' +
                                    '<th>OT Hours</th>' +
                                    '<th>OT Rate</th>' +
                                    '<th>OT  Amount</th>' +
                                '</tr>' +
                                '<tr>' +
                                    '<th>WD</th>' +
                                    '<td>' + item.work_days['wd'] + '</td>' +
                                    '<td>' + item.work_days_rates['wd'] + '</td>' +
                                    '<td>' + item.work_days_amount['wd'] + '</td>' +
                                    '<td>' + item.over_time['wd'] + '</td>' +
                                    '<td>' + item.over_time_rates['wd'] + '</td>' +
                                    '<td>' + item.over_time_amount['wd'] + '</td>' +
                                '</tr>' +
                                // '<tr>' +
                                //     '<th>RD</th>' +
                                //     '<td>' + item.work_days['rd'] + '</td>' +
                                //     '<td>' + item.work_days_rates['rd'] + '</td>' +
                                //     '<td>' + item.work_days_amount['rd'] + '</td>' +
                                //     '<td>' + item.over_time['rd'] + '</td>' +
                                //     '<td>' + item.over_time_rates['rd'] + '</td>' +
                                //     '<td>' + item.over_time_amount['rd'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>SH</th>' +
                                //     '<td>' + item.work_days['sh'] + '</td>' +
                                //     '<td>' + item.work_days_rates['sh'] + '</td>' +
                                //     '<td>' + item.work_days_amount['sh'] + '</td>' +
                                //     '<td>' + item.over_time['sh'] + '</td>' +
                                //     '<td>' + item.over_time_rates['sh'] + '</td>' +
                                //     '<td>' + item.over_time_amount['sh'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>RH</th>' +
                                //     '<td>' + item.work_days['rh'] + '</td>' +
                                //     '<td>' + item.work_days_rates['rh'] + '</td>' +
                                //     '<td>' + item.work_days_amount['rh'] + '</td>' +
                                //     '<td>' + item.over_time['rh'] + '</td>' +
                                //     '<td>' + item.over_time_rates['rh'] + '</td>' +
                                //     '<td>' + item.over_time_amount['rh'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>DH</th>' +
                                //     '<td>' + item.work_days['dh'] + '</td>' +
                                //     '<td>' + item.work_days_rates['dh'] + '</td>' +
                                //     '<td>' + item.work_days_amount['dh'] + '</td>' +
                                //     '<td>' + item.over_time['dh'] + '</td>' +
                                //     '<td>' + item.over_time_rates['dh'] + '</td>' +
                                //     '<td>' + item.over_time_amount['dh'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>SHRD</th>' +
                                //     '<td>' + item.work_days['shrd'] + '</td>' +
                                //     '<td>' + item.work_days_rates['shrd'] + '</td>' +
                                //     '<td>' + item.work_days_amount['shrd'] + '</td>' +
                                //     '<td>' + item.over_time['shrd'] + '</td>' +
                                //     '<td>' + item.over_time_rates['shrd'] + '</td>' +
                                //     '<td>' + item.over_time_amount['shrd'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>RHRD</th>' +
                                //     '<td>' + item.work_days['rhrd'] + '</td>' +
                                //     '<td>' + item.work_days_rates['rhrd'] + '</td>' +
                                //     '<td>' + item.work_days_amount['rhrd'] + '</td>' +
                                //     '<td>' + item.over_time['rhrd'] + '</td>' +
                                //     '<td>' + item.over_time_rates['rhrd'] + '</td>' +
                                //     '<td>' + item.over_time_amount['rhrd'] + '</td>' +
                                // '</tr>' +
                                // '<tr>' +
                                //     '<th>DHRD</th>' +
                                //     '<td>' + item.work_days['dhrd'] + '</td>' +
                                //     '<td>' + item.work_days_rates['dhrd'] + '</td>' +
                                //     '<td>' + item.work_days_amount['dhrd'] + '</td>' +
                                //     '<td>' + item.over_time['dhrd'] + '</td>' +
                                //     '<td>' + item.over_time_rates['dhrd'] + '</td>' +
                                //     '<td>' + item.over_time_amount['dhrd'] + '</td>' +
                                // '</tr>' +
                            '</tbody>' +
                        '</table>' +
                    '</div>'
                );
            }

            $('#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 {
                    $('#opt' + newDeduction).attr("data-added", 'true')
                    let amount = $('#opt' + newDeduction).attr("data-amount")
                    let name = $('#opt' + newDeduction).attr("data-deduction")
                    let type = $('#opt' + newDeduction).attr("data-type")
                    let typeLabel = '';
                    if(type == 1) {
                        typeLabel = 'Temporary';
                    } else if(type == 2) {
                        typeLabel = 'One-time';
                    } else {
                        typeLabel = 'Recurring';
                    }

                    let data = {
                        index: newDeduction,
                        name: name,
                        type: type,
                        deduction_rate: amount
                    }
                    fDeductions.push(data)

                    $('#tbodyDeductions').append(
                        '<tr id="addDeduction' + newDeduction + '">' +
                            '<td>' +
                                '<button type="button" id="bdr' + newDeduction + '" class="btn btn-xs btn-danger btnRemoveDeduction" style="width: 25px !important; height: 25px !important; padding: 5px">' +
                                    '<span class="icon text-white-50">' +
                                        '<i class="fas fa-times"></i>' +
                                    '</span>' +
                                '</button>' +
                            '</td>' +
                            '<td id="dn' + newDeduction + '">' + name + '</td>' +
                            '<td id="dt' + newDeduction + '">' + typeLabel + '</td>' +
                            '<td id="da' + newDeduction + '" class="deductionAmount">' + amount + '</td>' +
                        '</tr>'
                    );
                    calcDeductionGrandTotal();

                    $('#txtAddDeduction').val('default').trigger('change')

                    $('.btnRemoveDeduction').click(function(){
                        let id = $(this).attr('id').substring(3);
                        let dName = $('#dn' + id).html();
                        let dType = $('#dt' + id).html();
                        let dAmount = $('#da' + id).html();

                        $('#tbodyDeductions tr[id="addDeduction' + id + '"]').remove();
                        calcDeductionGrandTotal();
                        $('#opt' + id).attr("data-added", 'false')

                        fDeductions = fDeductions.filter(function( obj ) {
                            return obj.index !== id;
                        });
                    });
                }
            });

            calcDeductionGrandTotal()

            function calcDeductionGrandTotal() {
                let grandTotal = 0;
                $(".deductionAmount").each(function(){
                    grandTotal += currency($(this).html()).value;
                });
                grandTotal = currency(grandTotal, {symbol : '₱'}).format();
                $('#gtDeductionTotal').html(grandTotal);
                fgrandTotal = currency(grandTotal, {symbol : ''}).format();
                $('#totalDeductions').html(fgrandTotal);
                finalCalculation();
            }

            let adjCounter = 0;
            $('#btnAddAdjustment').click(function() {
                let amount = currency($('#txtAdjAmount').val()).value;
                let label = $('#txtAdjLabel').val();
                let type = $('#txtAdjType').val();
                console.log($('#txtAdjAmount').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 {
                    let data = {
                        index: adjCounter,
                        label: label,
                        type: type,
                        amount: amount
                    }
                    fAdjustment.push(data)

                    let typeLabel = 'Additional (+)';
                    if(type == 0) {
                        typeLabel = 'Deduction (-)';
                    }
                    amount = currency(amount, {symbol : ''}).format();
                    $('#adjustmentTable').append(
                        '<tr id="adjTr' + adjCounter + '">' +
                            '<td>' +
                                '<button type="button" id="adj' + adjCounter + '" class="btn btn-xs btn-danger btnRemoveAdj" style="width: 25px !important; height: 25px !important; padding: 5px">' +
                                    '<span class="icon text-white-50">' +
                                        '<i class="fas fa-times"></i>' +
                                    '</span>' +
                                '</button>' +
                            '</td>' +
                            '<td id="tol' + adjCounter + '">' + typeLabel + '</td>' +
                            '<td>' + label + '</td>' +
                            '<td id="tot' + adjCounter + '" class="adjAmount">' + amount + '</td>' +
                        '</tr>'
                    );
                    calcAdjGrandTotal();

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

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

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

                        $('#adjustmentTable tr[id="adjTr' + id + '"]').remove();
                        calcAdjGrandTotal();

                        let index = fAdjustment.findIndex(x => x.index === adjCounter);
                        fAdjustment.splice(index, 1);

                        fAdjustment = fAdjustment.filter(function( obj ) {
                            return obj.index !== id;
                        });
                        console.log(fAdjustment)
                    });
                    adjCounter++;
                }
            });

            function calcAdjGrandTotal() {
                let grandTotal = 0;
                $(".adjAmount").each(function(){
                    let id = $(this).attr('id').substring(3);
                    let type = $('#tol' + id).html();

                    if(type == 'Additional (+)') {
                        grandTotal = grandTotal + currency($(this).html()).value;
                    } else {
                        grandTotal = grandTotal - currency($(this).html()).value;
                    }
                });
                grandTotal = currency(grandTotal, {symbol : '₱'}).format();
                $('#adjGrandTotal').html(grandTotal);
                fgrandTotal = currency(grandTotal, {symbol : ''}).format();
                $('#totalAdjustments').html(fgrandTotal);
                finalCalculation();
            }

            function finalCalculation() {
                let grandTotal = 0;
                $(".sumgt").each(function(){
                    grandTotal += currency($(this).html()).value;
                });
                grandTotal = currency($('.sumgtDtr').html()).value - grandTotal;
                grandTotal += currency($('.sumgtAdjustment').html()).value;
                grandTotal += currency($('.sumgtContracts').html()).value;
                grandTotal = currency(grandTotal, {symbol : '₱'}).format();
                $('#grandTotalPayment').html(grandTotal);
            }

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

            $('#btnConfirmSave').click(function() {
                loader();
                if(personnel) {

                    let nightDif = $('#txtNightDif').val() > 0 ? $('#txtNightDif').val() : 0;
                    if($('#txtNightDif').is(':disabled')){
                        nightDif = 0
                    }

                    let incentive = $('#txtIncentive').val() > 0 ? $('#txtIncentive').val() : 0;
                    if($('#txtIncentive').is(':disabled')){
                        incentive = 0
                    }

                    let uniform = $('#txtUniform').val() > 0 ? $('#txtUniform').val() : 0;
                    if($('#txtUniform').is(':disabled')){
                        uniform = 0
                    }

                    let overtime = $('#txtOvertime').val() > 0 ? $('#txtOvertime').val() : 0;
                    if($('#txtOvertime').is(':disabled')){
                        overtime = 0
                    }

                    let thirteenth = $('#txtThirteenth').val() > 0 ? $('#txtThirteenth').val() : 0;
                    if($('#txtThirteenth').is(':disabled')){
                        thirteenth = 0
                    }

                    let retirement = $('#txtRetirment').val() > 0 ? $('#txtRetirment').val() : 0;
                    if($('#txtRetirment').is(':disabled')){
                        retirement = 0
                    }

                    let ssscont = $('#txtSCont').val() > 0 ? $('#txtSCont').val() : 0;
                    if($('#txtSCont').is(':disabled')){
                        ssscont = 0
                    }

                    let philcont = $('#txtPhilhealthCont').val() > 0 ? $('#txtPhilhealthCont').val() : 0;
                    if($('#txtPhilhealthCont').is(':disabled')){
                        philcont = 0
                    }

                    let pgcont = $('#txtPagIbigCont').val() > 0 ? $('#txtPagIbigCont').val() : 0;
                    if($('#txtPagIbigCont').is(':disabled')){
                        pgcont = 0
                    }

                    let misc = {
                        nightDif: currency(nightDif).value,
                        incentive: currency(incentive).value,
                        uniform: currency(uniform).value,
                        overtime: currency(overtime).value,
                        thirteenth: currency(thirteenth).value,
                        retirement: currency(retirement).value,
                        ssscont: currency(ssscont).value,
                        philcont: currency(philcont).value,
                        pgcont: currency(pgcont).value,
                    }

                    let miscTotal = (((currency(nightDif).value + currency(incentive).value + currency(uniform).value + currency(overtime).value) - currency(ssscont).value) - currency(philcont).value) - currency(pgcont).value
                    //+ currency(thirteenth).value + currency(retirement).value
                    //console.log(miscTotal)

                    let zTotals = {
                        dtr: currency($('#totalDtr').html()).value,
                        loans: currency($('#totalLoans').html()).value,
                        deductions: currency($('#totalDeductions').html()).value,
                        adjustment: currency($('#totalAdjustments').html()).value,
                        total: currency($('#grandTotalPayment').html()).value,
                        miscTotal: miscTotal
                    }
                    $.ajax({
                        url : "{{ route( 'payment.store', ['ppid' => $id] ) }}",
                        data: {
                            '_token': '{{ csrf_token() }}',
                            ppid : {{ $id }},
                            personnel: personnel,
                            posts: posts,
                            contributions: fContributions,
                            fLoans: fLoans,
                            fDeductions: fDeductions,
                            fAdjustment: fAdjustment,
                            zTotals: zTotals,
                            mode_of_payment: $('#txtModeOfPayment').val(),
                            location: $('#txtLocation').val(),
                            bank_name: $('#txtBankName').val(),
                            account_name: $('#txtBankAccount').val(),
                            account_number: $('#txtBankNumber').val(),
                            misc: misc
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function( response )
                        {
                            if(response.code == 200) {
                                // $("#txtPersonnel").select2({
                                //     theme: "bootstrap4"
                                // })
                                resetTable();
                                $('#txtPersonnel').val('default');
                                $('#txtPersonnel').trigger('change');

                                notif.showNotification('top','right', 'success', response.msg)
                                $('#mdlConfirmation').modal('hide');
                                unloader()
                            } else {
                                $('#mdlConfirmation').modal('hide');
                                unloader()
                                notif.showNotification('top','right', 'danger', response.msg)
                            }

                        },
                        error: function()
                        {
                            notif.showNotification('top','right', 'danger', 'Something went wrong')
                            $('#mdlConfirmation').modal('hide');
                            unloader();
                        }
                    });
                } else {
                    notif.showNotification('top','right', 'danger', 'No personnel selected');
                    $('#mdlConfirmation').modal('hide');
                    unloader()
                }


            });



            $('#btnRmC1').click(function() {
                $('#txtNightDif').prop('disabled', true)
                let x = $('#btnRmC1T').html();
                $('#btnRmC1T').html(x.strike())
                $(this).hide()
                $('#btnAddC1').show()
                if(parseFloat($('#txtNightDif').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtNightDif').val())
                }
                contractTotal()
            });

            $('#btnAddC1').click(function() {
                $('#txtNightDif').prop('disabled', false)
                let x = $('#btnRmC1T').children().html();
                $('#btnRmC1T').html(x);
                $(this).hide()
                $('#btnRmC1').show()


                if(parseFloat($('#txtNightDif').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtNightDif').val())
                }
                contractTotal()
            });

            $('#btnRmC2').click(function() {
                $('#txtIncentive').prop('disabled', true)
                let x = $('#btnRmC2T').html();
                $('#btnRmC2T').html(x.strike())
                $(this).hide()
                $('#btnAddC2').show()


                if(parseFloat($('#txtIncentive').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtIncentive').val())
                }
                contractTotal()
            });

            $('#btnAddC2').click(function() {
                $('#txtIncentive').prop('disabled', false)
                let x = $('#btnRmC2T').children().html();
                $('#btnRmC2T').html(x);
                $(this).hide()
                $('#btnRmC2').show()


                if(parseFloat($('#txtIncentive').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtIncentive').val())
                }
                contractTotal()
            });

            $('#btnRmC3').click(function() {
                $('#txtUniform').prop('disabled', true)
                let x = $('#btnRmC3T').html();
                $('#btnRmC3T').html(x.strike())
                $(this).hide()
                $('#btnAddC3').show()


                if(parseFloat($('#txtUniform').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtUniform').val())
                }
                contractTotal()
            });

            $('#btnAddC3').click(function() {
                $('#txtUniform').prop('disabled', false)
                let x = $('#btnRmC3T').children().html();
                $('#btnRmC3T').html(x);
                $(this).hide()
                $('#btnRmC3').show()


                if(parseFloat($('#txtUniform').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtUniform').val())
                }
                contractTotal()
            });

            $('#btnRmC4').click(function() {
                $('#txtOvertime').prop('disabled', true)
                let x = $('#btnRmC4T').html();
                $('#btnRmC4T').html(x.strike())
                $(this).hide()
                $('#btnAddC4').show()


                if(parseFloat($('#txtOvertime').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtOvertime').val())
                }
                contractTotal()
            });

            $('#btnAddC4').click(function() {
                $('#txtOvertime').prop('disabled', false)
                let x = $('#btnRmC4T').children().html();
                $('#btnRmC4T').html(x);
                $(this).hide()
                $('#btnRmC4').show()


                if(parseFloat($('#txtOvertime').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtOvertime').val())
                }
                contractTotal()
            });

            $('#btnRmC5').click(function() {
                $('#txtThirteenth').prop('disabled', true)
                let x = $('#btnRmC5T').html();
                $('#btnRmC5T').html(x.strike())
                $(this).hide()
                $('#btnAddC5').show()


                if(parseFloat($('#txtThirteenth').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtThirteenth').val())
                }
                //contractTotal()
            });

            $('#btnAddC5').click(function() {
                $('#txtThirteenth').prop('disabled', false)
                let x = $('#btnRmC5T').children().html();
                $('#btnRmC5T').html(x);
                $(this).hide()
                $('#btnRmC5').show()


                if(parseFloat($('#txtThirteenth').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtThirteenth').val())
                }
                //contractTotal()
            });

            $('#btnRmC6').click(function() {
                $('#txtRetirment').prop('disabled', true)
                let x = $('#btnRmC6T').html();
                $('#btnRmC6T').html(x.strike())
                $(this).hide()
                $('#btnAddC6').show()


                if(parseFloat($('#txtRetirment').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtRetirment').val())
                }
                //contractTotal()
            });

            $('#btnAddC6').click(function() {
                $('#txtRetirment').prop('disabled', false)
                let x = $('#btnRmC6T').children().html();
                $('#btnRmC6T').html(x);
                $(this).hide()
                $('#btnRmC6').show()


                if(parseFloat($('#txtRetirment').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtRetirment').val())
                }
                //contractTotal()
            });

            $('#btnRmC7').click(function() {
                $('#txtSCont').prop('disabled', true)
                let x = $('#btnRmC7T').html();
                $('#btnRmC7T').html(x.strike())
                $(this).hide()
                $('#btnAddC7').show()


                if(parseFloat($('#txtSCont').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtSCont').val())
                }
                contractTotal()
            });

            $('#btnAddC7').click(function() {
                $('#txtSCont').prop('disabled', false)
                let x = $('#btnRmC7T').children().html();
                $('#btnRmC7T').html(x);
                $(this).hide()
                $('#btnRmC7').show()


                if(parseFloat($('#txtSCont').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtSCont').val())
                }
                contractTotal()
            });

            $('#btnRmC8').click(function() {
                $('#txtPhilhealthCont').prop('disabled', true)
                let x = $('#btnRmC8T').html();
                $('#btnRmC8T').html(x.strike())
                $(this).hide()
                $('#btnAddC8').show()


                if(parseFloat($('#txtPhilhealthCont').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtPhilhealthCont').val())
                }
                contractTotal()
            });

            $('#btnAddC8').click(function() {
                $('#txtPhilhealthCont').prop('disabled', false)
                let x = $('#btnRmC8T').children().html();
                $('#btnRmC8T').html(x);
                $(this).hide()
                $('#btnRmC8').show()


                if(parseFloat($('#txtPhilhealthCont').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtPhilhealthCont').val())
                }
                contractTotal()
            });

            $('#btnRmC9').click(function() {
                $('#txtPagIbigCont').prop('disabled', true)
                let x = $('#btnRmC9T').html();
                $('#btnRmC9T').html(x.strike())
                $(this).hide()
                $('#btnAddC9').show()


                if(parseFloat($('#txtPagIbigCont').val()) > 1) {
                    totalContract = totalContract + parseFloat($('#txtPagIbigCont').val())
                }
                contractTotal()
            });

            $('#btnAddC9').click(function() {
                $('#txtPagIbigCont').prop('disabled', false)
                let x = $('#btnRmC9T').children().html();
                $('#btnRmC9T').html(x);
                $(this).hide()
                $('#btnRmC9').show()


                if(parseFloat($('#txtPagIbigCont').val()) > 1) {
                    totalContract = totalContract - parseFloat($('#txtPagIbigCont').val())
                }
                contractTotal()
            });

            $(".txtForCon").on('focusin', function(){
                //console.log("Saving value " + $(this).val());
                $(this).data('val', $(this).val());
            });


            $( ".txtForCon" ).change(function() {
                //console.log(totalContract)
                const id = $(this).attr('id')
                //console.log(id)
                let prev = $(this).data('val');
                //console.log(prev)
                let testVal = parseFloat($(this).val())
                let newVal = 0
                if(testVal > 1) {
                    newVal = testVal
                }

                if(prev > 1) {
                    prev = prev
                } else {
                    prev = 0
                }
                //console.log(testVal)
                //console.log(newVal)
                if(id === 'txtSCont' || id === 'txtPagIbigCont' || id === 'txtPhilhealthCont') {
                    totalContract = totalContract + parseFloat(prev)
                    totalContract = totalContract - newVal
                } else {
                    totalContract = totalContract - parseFloat(prev)
                    totalContract = totalContract + newVal
                }
                //console.log(totalContract)
                contractTotal()

            });

            function contractTotal() {
                var grandTotal = currency(totalContract, {symbol : '₱'}).format();
                $('#totalContracts').html(grandTotal);
                finalCalculation()
            }
        });
    </script>

@endsection

@endsection