@extends('layouts.master')
@section('title', 'Withdraw DPS')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title">
            <strong>DPS Withdrawal</strong>
        </h1>
    </div>
    <div class="header-action">
        <nav class="nav">
            <a class="nav-link" href="{{ route('dps.show', $dps->id) }}">Back to DPS</a>
        </nav>
    </div>
</header>
@endsection

@section('content')

<div class="col-md-12">
    <div class="card">
        <div class="card-header bg-danger text-white">
            <h5 class="mb-0">Withdraw DPS Account</h5>
        </div>

        <form action="{{ route('dps.withdraw', $dps->id) }}" method="POST">
            @csrf

            <div class="card-body">

                {{-- BASIC INFO --}}
                <table class="table table-bordered">
                    <tr>
                        <th>Customer</th>
                        <td>{{ $dps->customer->name ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th>DPS Account No</th>
                        <td>{{ $dps->id }}</td>
                    </tr>
                    <tr>
                        <th>Paid Amount</th>
                        <td id="paidAmount">{{ number_format($paidAmount, 2) }}</td>
                    </tr>
                    <tr>
                        <th>Interest</th>
                        <td id="interestAmount">{{ number_format($interest, 2) }}</td>
                    </tr>
                    <tr>
                        <th>Penalty (Optional)</th>
                        <td>
                            <input type="number"
                                   step="0.01"
                                   min="0"
                                   name="penalty_amount"
                                   id="penaltyInput"
                                   class="form-control"
                                   value="0">
                        </td>
                    </tr>
                    <tr>
                        <th>Final Payable</th>
                        <td class="text-success fw-bold" id="finalAmount">
                            {{ number_format($paidAmount + $interest, 2) }}
                        </td>
                    </tr>
                </table>

                <div class="form-group">
                    <label>Withdraw Date <span class="text-danger">*</span></label>
                    <input type="date"
                           name="withdraw_date"
                           class="form-control"
                           value="{{ date('Y-m-d') }}"
                           required>
                </div>

                <div class="form-group">
                <label>Bank Account</label>
                <select name="bank_account_id" class="form-control" required>
                    @foreach(App\BankAccount::all() as $account)
                        <option value="{{ $account->id }}">{{ $account->name }} (Balance: {{ number_format($account->current_balance, 2) }})</option>
                    @endforeach
                </select>
            </div>


                {{-- HIDDEN VALUES --}}
                <input type="hidden" name="paid_amount" value="{{ $paidAmount }}">
                <input type="hidden" name="interest_amount" value="{{ $interest }}">

            </div>

            <div class="card-footer text-right">
                <a href="{{ route('dps.show', $dps->id) }}" class="btn btn-secondary">
                    Cancel
                </a>
                <button class="btn btn-danger">
                    Confirm Withdraw
                </button>
            </div>

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

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const penaltyInput = document.getElementById('penaltyInput');
    const finalAmount = document.getElementById('finalAmount');

    const paid = {{ $paidAmount }};
    const interest = {{ $interest }};

    penaltyInput.addEventListener('input', function () {
        let penalty = parseFloat(this.value) || 0;
        let total = paid + interest - penalty;
        finalAmount.innerText = total.toFixed(2);
    });
});
</script>
@endsection
