@extends('layouts.app')

@section('content')
    <div class="container py-3">
        <h3 class="card-title">Bayaran Pinjaman</h3>
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">Butiran Akaun Pinjaman</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-0"><strong>No. Akaun Pinjaman:</strong> {{ $account->account_no }}</p>
                        <p class="mb-0"><strong>Nama Pemilik Akaun:</strong> {{ $account->user_name }}</p>
                        <p class="mb-0"><strong>No. Kad Pengenalan:</strong> {{ $account->user_id }}</p>
                        <p class="mb-0"><strong>Fasa:</strong> {{ $fasa }}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-0"><strong>Penama:</strong> {{ $account->co_user_name ?? '-' }}</p>
                        <p class="mb-0"><strong>No. Kad Pengenalan:</strong> {{ $account->co_user_id ?? '-' }}</p>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <p class="mb-0"><strong>Tempoh Ansuran:</strong> {{ $account->tenure_month }} bulan</p>
                        <p class="mb-0"><strong>Jumlah Pinjaman:</strong> RM
                            {{ number_format($account->financing_amt, 2) }}</p>
                        <p class="mb-0"><strong>Baki Perlu Dibayar:</strong> RM
                            {{ number_format($loandetail->out_total_amt, 2) }}</p>
                        <p class="mb-0"><strong>Ansuran Bulanan:</strong> RM
                            {{ number_format($account->monthly_payment, 2) }}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-0"><strong>No. Unit:</strong> {{ $account->unit_no }}</p>
                        <p class="mb-0"><strong>Alamat Unit:</strong> {{ $account->ppr_name }}, {{ $account->postcode }}
                            {{ $account->city }}</p>
                        <p class="mb-0"><strong>Kawasan:</strong> {{ $account->area }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">Butiran Bayaran</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('trx.postedcpayment') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="trx_description" style="font-size: 14px;"><b>Tujuan:</b></label>
                        <input type="text" class="form-control" id="trx_description" name="trx_description"
                            value="{{ $info->trx_description }} bagi no. akaun {{ $account->account_no }}" readonly>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-8">
                            <label for="payer_name" style="font-size: 14px;"><b>Nama Pembayar<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="text" class="form-control" id="payer_name" name="payer_name"
                                placeholder="Masukkan Nama Pembayar" value="{{ $account->user_name }}" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="payer_idno" style="font-size: 14px;"><b>Nombor KP Pembayar:</b></label>
                            <input type="text" class="form-control" id="payer_idno" name="payer_idno"
                                placeholder="Masukkan Nombor KP Pembayar" value="{{ $account->user_id }}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="payer_phoneno" style="font-size: 14px;"><b>Nombor Tel. Pembayar<span
                                        style="color: red;">*</span>:</b></label>
                            <input type="number" class="form-control" id="payer_phoneno" name="payer_phoneno"
                                placeholder="Masukkan Nombor Tel. Pembayar" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="payer_email" style="font-size: 14px;"><b>Email Pembayar:</b></label>
                            <input type="email" class="form-control" id="payer_email" name="payer_email"
                                placeholder="Masukkan Email Pembayar">
                        </div>
                    </div>

                    @if (auth()->id() == 830703085841 || auth()->id() == 112233)
                        <div class="form-group">
                            <label for="payment_amount" class="font-weight-bold" style="font-size: 14px;">Nilai Bayaran
                                (RM):</label>
                            <div class="input-group">
                                <div class="input-group-append">
                                    <span class="input-group-text">RM</span>
                                </div>
                                <input type="text" class="form-control" name="payment_amount"
                                    placeholder="Masukkan Nilai Bayaran" required step="any"
                                    value="{{ $account->monthly_payment }}">
                            </div>
                        </div>
                    @else
                        <div class="form-group">
                            <label for="payment_amount" style="font-size: 14px;"><b>Nilai Bayaran (RM):</b></label>
                            <input type="number" class="form-control" name="payment_amount"
                                placeholder="Masukkan Nilai Bayaran" required step="any"
                                value="{{ $account->monthly_payment }}" min="{{ $account->monthly_payment }}">
                        </div>
                    @endif

                    <input type="hidden" name="account_no" value="{{ $account->account_no }}">
                    <div class="text-center">
                        <a href="{{ url()->previous() }}" class="btn btn-outline-danger col-3">Kembali</a>
                        <button type="submit" class="btn btn-success col-3 ml-auto">Bayar</button>
                    </div>
                </form>
            </div>

        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const paymentInput = document.getElementById('payment_amount');

            paymentInput.addEventListener('input', function() {
                let value = this.value.replace(/[^\d]/g, '');
                if (value.length > 0) {
                    // Convert to a number
                    let num = parseFloat(value);

                    // Format the number as a monetary value
                    let formattedValue = (num / 100).toLocaleString('en-US', {
                        style: 'currency',
                        currency: 'USD',
                        minimumFractionDigits: 2
                    });

                    // Update the input field value
                    this.value = formattedValue.replace('$', ''); // Remove currency symbol
                }
            });
        });
    </script>
@endsection