@extends('layouts.app')
<style>
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
        color: #212529;
    }

    .table-bordered {
        border: 1px solid #dee2e6;
    }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
        padding: 0.75rem;
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    .table tbody+tbody {
        border-top: 2px solid #dee2e6;
    }

    .text-right {
        text-align: right;
    }
</style>
@section('content')
    <div class="container py-3">
        <h3 class="card-title">FULL SETTLEMENT</h3>
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">CALCULATION FOR FULLSETTLEMENT/EPF/INSURANCE</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-0"><strong>Account/IC No:</strong> {{ $account->account_no }} /
                            {{ $account->user_id }}</p>
                        <p class="mb-0"><strong>Owner Name:</strong> {{ $account->user_name }}</p>
                        <p class="mb-0"><strong>Unit:</strong> {{ $account->unit_no }}</p>
                        <p class="mb-0"><strong>PPR/PA:</strong> {{ $account->ppr->ppr_name }}</p>
                    </div>
                </div>
                <hr>
                  <form action="{{ route('fs.submit') }}" method="POST" class="payment-form">
                    @csrf
                    <div class="row">
                        <!-- In your Blade file -->
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Tenure</th>
                                    <th>P</th>
                                    <th>I</th>
                                    <th>M</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Total Current Tenure @ {{ $DateEndOfYear }}</td>
                                    <td>{{ $settlementdata['current_tenure']['tenure'] }}</td>
                                    <td>{{ number_format($settlementdata['current_tenure']['p'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['current_tenure']['i'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['current_tenure']['m'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['current_tenure']['total'], 2) }}</td>
                                </tr>
                                <!-- Hidden inputs for "Total Current Tenure" -->
                                <input type="hidden" name="current_tenure[tenure]" value="{{ $settlementdata['current_tenure']['tenure'] }}">
                                <input type="hidden" name="current_tenure[p]" value="{{ $settlementdata['current_tenure']['p'] }}">
                                <input type="hidden" name="current_tenure[i]" value="{{ $settlementdata['current_tenure']['i'] }}">
                                <input type="hidden" name="current_tenure[m]" value="{{ $settlementdata['current_tenure']['m'] }}">
                                <input type="hidden" name="current_tenure[total]" value="{{ $settlementdata['current_tenure']['total'] }}">

                                <tr>
                                    <td>Total Paid as at {{ $DateEndLastMonth }}</td>
                                    <td>{{ $settlementdata['paid_as_at']['tenure'] }}</td>
                                    <td>{{ number_format($settlementdata['paid_as_at']['p'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['paid_as_at']['i'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['paid_as_at']['m'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['paid_as_at']['total'], 2) }}</td>
                                </tr>
                                 <!-- Hidden inputs for "Total Paid as at ..." -->
                                <input type="hidden" name="paid_as_at[tenure]" value="{{ $settlementdata['paid_as_at']['tenure'] }}">
                                <input type="hidden" name="paid_as_at[p]" value="{{ $settlementdata['paid_as_at']['p']}}">
                                <input type="hidden" name="paid_as_at[i]" value="{{ $settlementdata['paid_as_at']['i'] }}">
                                <input type="hidden" name="paid_as_at[m]" value="{{ $settlementdata['paid_as_at']['m']}}">
                                <input type="hidden" name="paid_as_at[total]" value="{{ $settlementdata['paid_as_at']['total'] }}">

                                <tr>
                                    @if ($advance === '1')
                                     <td></td>
                                    @else
                                    <td>Bal outstanding @ {{ $DateEndOfYear }}</td>
                                    @endif
                                    <td>{{ $settlementdata['outstanding']['tenure'] }}</td>
                                    <td>{{ number_format($settlementdata['outstanding']['p'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['outstanding']['i'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['outstanding']['m'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['outstanding']['total'], 2) }}</td>
                                </tr>
                                 <!-- Hidden inputs for "Bal outstanding" -->
                                <input type="hidden" name="outstanding[tenure]" value="{{ $settlementdata['outstanding']['tenure'] }}">
                                <input type="hidden" name="outstanding[p]" value="{{ $settlementdata['outstanding']['p'] }}">
                                <input type="hidden" name="outstanding[i]" value="{{ $settlementdata['outstanding']['i'] }}">
                                <input type="hidden" name="outstanding[m]" value="{{ $settlementdata['outstanding']['m'] }}">
                                <input type="hidden" name="outstanding[total]" value="{{ $settlementdata['outstanding']['total'] }}">

                                <tr>
                                    <td>Total Loan</td>
                                    <td>{{ $settlementdata['total_loan']['tenure'] }}</td>
                                    <td>{{ number_format($settlementdata['total_loan']['p'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['total_loan']['i'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['total_loan']['m'], 2) }}</td>
                                    <td>{{ number_format($settlementdata['total_loan']['total'], 2) }}</td>
                                </tr>
                                <!-- Hidden inputs for "Total Loan" -->
                                <input type="hidden" name="total_loan[tenure]" value="{{ $settlementdata['total_loan']['tenure'] }}">
                                <input type="hidden" name="total_loan[p]" value="{{ $settlementdata['total_loan']['p'] }}">
                                <input type="hidden" name="total_loan[i]" value="{{ $settlementdata['total_loan']['i'] }}">
                                <input type="hidden" name="total_loan[m]" value="{{ $settlementdata['total_loan']['m'] }}">
                                <input type="hidden" name="total_loan[total]" value="{{ $settlementdata['total_loan']['total']}}">

                            </tbody>
                        </table>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="otherpay" class="col-sm-4 col-form-label text-sm-left pt-1">Full
                                        Settlement/EPF/Insurance</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input" id="otherpay" name="otherpay"
                                            value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="outstandingamt"
                                        class="col-sm-4 col-form-label text-sm-left pt-1">Less:Outstanding Amount @
                                        {{ $DateEndOfYear }}</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input"
                                            id="outstandingamt" name="outstandingamt"
                                            value="{{ number_format($settlementdata['outstanding']['total'], 2) }}"
                                            readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="fullsettlementfee"
                                        class="col-sm-4 col-form-label text-sm-left pt-1">Fullsettlement Fee</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input"
                                            id="fullsettlementfee" name="fullsettlementfee" value="{{ number_format($fsfee_amt, 2) }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="othercharges" class="col-sm-4 col-form-label text-sm-left pt-1">Other
                                        Charges</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input"
                                            id="othercharges"  name="othercharges" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="surplasamt" class="col-sm-4 col-form-label text-sm-left pt-1">Surplus /
                                        Deficit</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input"
                                            id="surplasamt"  name="surplasamt" value="" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="khairatamt" class="col-sm-4 col-form-label text-sm-left pt-1">Add: Khairat
                                        Kematian</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm calc-input"
                                            id="khairatamt" name="khairatamt" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="totalsurplusamt" class="col-sm-4 col-form-label text-sm-left pt-1">Total
                                        Surplus/Deficit</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="totalsurplusamt" name="totalsurplusamt"
                                            value="" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br><br>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="futureinterest"
                                        class="col-sm-4 col-form-label text-sm-left pt-1"><strong>Loss on Future Interest
                                        </strong></label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="futureinterest" name="futureinterest"
                                            value="{{ number_format($futureInterest, 2) }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10">
                            <div class="row mb-2">
                                <div class="form-group row col-md-12">
                                    <label for="uncollectedmaint"
                                        class="col-sm-4 col-form-label text-sm-left pt-1"><strong>Uncollected Maintenance
                                            Fee</strong></label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control form-control-sm" id="uncollectedmaint" name="uncollectedmaint"
                                            value="{{ number_format($uncollectedMaintenance, 2) }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="account_no" value="{{ $account->account_no }}">
                    <input type="hidden" name="user_id" value="{{ $account->user_id }}">
                      <input type="hidden" name="advance_acc" value="{{ $advance }}">
                    <div class="text-center">
                        <button type="submit" class="btn btn-success col-3 ml-auto">Hantar</button>
                    </div>
                      
                 </form>
                   <a href="{{ url()->previous() }}" class="btn btn-outline-danger py-2">Kembali</a>
                <br><br>
            </div>
        </div>
        <script>
            $(document).ready(function() {

                function formatNumber(n) {
                    return Number(n).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }

                function setDefaultValue($input) {
                    let val = $input.val();
                    if (!val || isNaN(parseFloat(val.replace(/,/g, '')))) {
                        $input.val("0.00");
                    }
                }

                function getFloatValue(id) {
                    let val = $(id).val();
                    return parseFloat(val.replace(/,/g, '')) || 0;
                }

                function calculateSurplus() {
                    let otherpay = getFloatValue('#otherpay');
                    let outstandingamt = getFloatValue('#outstandingamt');
                    let fullsettlementfee = getFloatValue('#fullsettlementfee');
                    let othercharges = getFloatValue('#othercharges');
                    let khairatamt = getFloatValue('#khairatamt');

                    let surplasamt = otherpay - outstandingamt - fullsettlementfee - othercharges;
                    let totalsurplusamt = surplasamt + khairatamt;

                    $('#surplasamt').val(formatNumber(surplasamt));
                    $('#totalsurplusamt').val(formatNumber(totalsurplusamt));
                }

                // Handle input / blur events
                $('.calc-input').on('input blur', function() {
                    calculateSurplus();
                }).on('blur', function() {
                    setDefaultValue($(this));
                    calculateSurplus(); // Recalculate after setting default
                });

                // Set default values on page load
                $('.calc-input').each(function() {
                    setDefaultValue($(this));
                });

                // Initial calculation
                calculateSurplus();
            });
        </script>
    @endsection