@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="col-md-12 mt-4">
            {{-- @include('errors')
        @include('layouts.messages') --}}
            <form action="{{ route('payment.update') }}" method="POST" id="paymentform" onsubmit="return validateForm()">
                @csrf
                <div class="col">
                    <div class="card shadow-sm border-0 rounded">
                        <div class="card-header" style="background-color:  #f1f1f1;">
                            <h5 class="text-black text-center"><strong>CUKAI TAKSIRAN AM </strong></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h5>Maklumat Akaun & Alamat Harta</h5>
                                </div>
                            </div>
                            
                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="account_no" class="col-sm-4 col-form-label text-sm-right pt-1">No.
                                                Akaun</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="account_no"
                                                    value="{{ $accounts->account_no }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="name"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Nama</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="name"
                                                    value="{{ $accounts->name }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="name"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Alamat</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm mb-2"
                                                    id="prop_add1" value="{{ $accounts->prop_add1 }}" readonly>
                                                <input type="text" class="form-control form-control-sm mb-2"
                                                    id="prop_add2" value="{{ $accounts->prop_add2 }}" readonly>
                                                <input type="text" class="form-control form-control-sm mb-2"
                                                    id="prop_add3"
                                                    value="{{ $accounts->prop_add3 . ' ,' . $accounts->prop_add4 }}"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="bill_no" class="col-sm-4 col-form-label text-sm-right pt-1">No.
                                                Bil</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="bill_no"
                                                    value="{{ $accounts->bill_no ?? '' }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="bill_date"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Tarikh</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="bill_date"
                                                    value="{{ \Carbon\Carbon::parse($accounts->bill_date)->format('d/m/Y') }}"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="ref_no"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Tempoh</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="ref_no"
                                                    value="{{ \Carbon\Carbon::parse($accounts->tempoh_date)->format('d/m/Y') }}"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Add more fields as needed -->
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h5>Keterangan & Butiran Bayaran</h5>
                                </div>
                            </div>
                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="Kadar" class="col-sm-4 col-form-label text-sm-right pt-1">Kadar</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="Kadar"
                                                    value="{{ $accounts->kadar }} %" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="tahunan_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Nilai Tahunan</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="tahunan_amt"
                                                value="RM {{ number_format($accounts->tahunan_amt, 2, '.', ',') }}" readonly>                                            
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="yearly_taksiran_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Taksiran Tahunan</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="yearly_taksiran_amt"
                                                value="RM {{ number_format($accounts->yearly_taksiran_amt, 2, '.', ',') }}" readonly>                                            
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="tempoh_date"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Perlu Dibayar Sebelum</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="tempoh_date"
                                                    value="{{ \Carbon\Carbon::parse($accounts->tempoh_date)->format('d/m/Y') }}"
                                                    readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="balance_amt" class="col-sm-4 col-form-label text-sm-right pt-1">Baki pada {{ \Carbon\Carbon::parse($accounts->cycle)->format('d/m/Y') }}</label>
                                            <div class="col-sm-8">
                                                    <input type="text" class="form-control form-control-sm" id="balance_amt"
                                                    value="RM {{ number_format($accounts->balance_amt, 2, '.', ',') }}" readonly>   
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="late_fee_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Baki Caj Denda Lewat</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="late_fee_amt"
                                                value="RM {{ number_format($accounts->late_fee_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="notice_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Baki Caj Notis E</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="late_fee_amt"
                                                value="RM {{ number_format($accounts->notice_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="warrant_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Baki Caj Waran</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="warrant_amt"
                                                value="RM {{ number_format($accounts->warrant_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="current_taksiran_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Kadar Taksiran Semasa</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="current_taksiran_amt"
                                                value="RM {{ number_format($accounts->current_taksiran_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="round_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1">Penggenapan</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="round_amt"
                                                value="RM {{ number_format($accounts->round_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="payment_amt"
                                                class="col-sm-4 col-form-label text-sm-right pt-1"><strong>Jumlah Perlu Dibayar</strong></label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="payment_amt"
                                                value="RM {{ number_format($accounts->payment_amt, 2, '.', ',') }}" readonly> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">  
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">     
                                        </div>
                                    </div>
                                    <div class="row mb-2">  
                                    </div>
                                </div>

                                <!-- Right Column -->
                                <div class="col-md-6">
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label class="col-sm-4 col-form-label text-sm-right pt-1"><strong>Pilihan Bayaran</strong></label>
                                            <div class="col-sm-8">
                                                {{-- <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="payment_type" id="radio_setahun" value="1" onchange="handlePaymentSelection()">
                                                    <label class="form-check-label" for="radio_setahun">
                                                        Setahun (RM {{ number_format($accounts->yearly_taksiran_amt, 2, '.', ',') }})
                                                    </label>
                                                </div> --}}
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="payment_type" id="radio_sepenggal" value="2" onchange="handlePaymentSelection()">
                                                    <label class="form-check-label" for="radio_sepenggal">
                                                        Sepenggal (RM {{ number_format($accounts->current_taksiran_amt, 2, '.', ',') }})
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="payment_type" id="radio_perlu" value="4" onchange="handlePaymentSelection()">
                                                    <label class="form-check-label" for="radio_perlu">
                                                        Perlu Dibayar (RM {{ number_format($accounts->payment_amt, 2, '.', ',') }})
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="payment_type" id="radio_lain" value="3" onchange="handlePaymentSelection()">
                                                    <label class="form-check-label" for="radio_lain">
                                                        Lain-Lain Amaun
                                                    </label>
                                                </div>
                                                <!-- Custom amount input - directly under Lain-lain option -->
                                                <div id="lain_amount_container" class="mt-2" style="display: none;">
                                                    <input type="number" 
                                                           step="0.01" 
                                                           class="form-control form-control-sm" 
                                                           id="lain_amount" 
                                                           name="lain_amount"
                                                           placeholder="Masukkan jumlah bayaran (RM)"
                                                           onchange="updatePaymentAmount(this)">
                                                    <small id="lain_amount_error" class="text-danger" style="display: none;">Jumlah mesti sekurang-kurangnya RM 10.00</small>
                                                </div>
                                            </div>
                                            <small id="radio_error" class="text-danger" style="display: none;">Sila pilih salah satu jenis bayaran.</small>
                                        </div>
                                        <div class="row mb-2">
                                        </div>
                                        <div class="row mb-2">
                                            <div class="form-group row col-md-12">
                                                <label for="email_user"
                                                    class="col-sm-4 col-form-label text-sm-right pt-1"><strong>Emel</strong></label>
                                                <div class="col-sm-8">
                                                    <input type="email" name="email_user" class="form-control" autocomplete="off"
                                                    data-parsley-trigger="change" data-parsley-length="[6, 50]"
                                                    value="{{ old('email_user') ?? ''}}">
                                                    <small class="form-text text-muted">Sila masukkan emel sah untuk menerima resit pembayaran</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="form-group row col-md-12">
                                                <label for="platformfee"
                                                    class="col-sm-4 col-form-label text-sm-right pt-1"><strong>Fi Platform</strong></label>
                                                <div class="col-sm-8">
                                                    <span id="nilai-txt">RM {{ number_format($platformfee,2) }}</span>
                                                    <input type="hidden" name="platformfee" id="platformfee" value="{{ $platformfee }}"
                                                    data-parsley-min='1'
                                                    required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="form-group row col-md-12">
                                                <label for="platformfee" class="col-sm-4 col-form-label text-sm-right pt-1">
                                                    <strong>Jumlah Bayaran</strong>
                                                </label>
                                                <div class="col-sm-8">
                                                    <span id="nilai_bayarant">RM {{ number_format($totalPayment ?? 0, 2) }}</span>
                                                    <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" value="{{ $totalPayment ?? 0 }}"
                                                           data-parsley-min="1" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                   
                                    <input type="hidden" name="payment_amount" id="payment_amount" value="">
                                    <input type="hidden" name="account_no" id="account_no" value="{{ $accounts->account_no  }}">
                                    <input type="hidden" name="bill_no" id="bill_no" value="{{ $accounts->bill_no  }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col text-center">
                            <button type="submit" class="btn" style="background-color: #383838; color: #f0f0f0;"
                                >Bayar</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
    // Define the payment amounts as global variables
    window.currentAmount = {{ $accounts->current_taksiran_amt ?? 0 }};
    window.perluAmount = {{ $accounts->payment_amt ?? 0 }};
    window.yearlyAmount = {{ $accounts->yearly_taksiran_amt ?? 0 }};
    window.platformFee = {{ $platformfee ?? 0 }};

    // Attach event listeners
    document.querySelectorAll('input[name="payment_type"]').forEach(radio => {
        radio.addEventListener('change', handlePaymentSelection);
    });

    const lainAmount = document.getElementById('lain_amount');
    if (lainAmount) {
        lainAmount.addEventListener('input', function() {
            updatePaymentAmount(this);
        });
    }

    // Initialize calculation
    handlePaymentSelection();
});

function handlePaymentSelection() {
    const setahunRadio = document.getElementById('radio_setahun');
    const sepenggalRadio = document.getElementById('radio_sepenggal');
    const perluRadio = document.getElementById('radio_perlu');
    const lainRadio = document.getElementById('radio_lain');
    const lainAmountContainer = document.getElementById('lain_amount_container');
    const lainAmount = document.getElementById('lain_amount');
    const paymentAmount = document.getElementById('payment_amount');

    // Clear any previous values
    lainAmount.value = '';

    if (lainRadio.checked) {
        lainAmountContainer.style.display = 'block';
        lainAmount.disabled = false;
        paymentAmount.value = '';
        lainAmount.focus();
    } else {
        lainAmountContainer.style.display = 'none';
        lainAmount.disabled = true;
        document.getElementById('lain_amount_error').style.display = 'none';

        // Set payment amount based on selection
        if (setahunRadio && setahunRadio.checked) {
            paymentAmount.value = window.yearlyAmount.toFixed(2);
        } else if (sepenggalRadio.checked) {
            paymentAmount.value = window.currentAmount.toFixed(2);
        } else if (perluRadio.checked) {
            paymentAmount.value = window.perluAmount.toFixed(2);
        }
    }

    calculateTotalPayment();
}

function updatePaymentAmount(inputElement) {
    const paymentAmount = document.getElementById('payment_amount');
    const errorElement = document.getElementById('lain_amount_error');
    const value = parseFloat(inputElement.value);

    if (document.getElementById('radio_lain').checked) {
        if (!value || value < 10.00) {
            errorElement.style.display = 'block';
            paymentAmount.value = '';
        } else {
            errorElement.style.display = 'none';
            paymentAmount.value = value.toFixed(2);
        }
    }

    calculateTotalPayment();
}

function calculateTotalPayment() {
    const paymentAmount = parseFloat(document.getElementById('payment_amount').value) || 0;
    const totalPayment = paymentAmount + window.platformFee;

    // Format the amount with thousand separators
    const formattedAmount = new Intl.NumberFormat('en-MY', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(totalPayment);

    // Update display and hidden input
    document.getElementById('nilai_bayarant').textContent = `RM ${formattedAmount}`;
    document.getElementById('nilai_bayaran').value = totalPayment.toFixed(2);
}

    </script>
    
    {{-- <script>
        const yearlyAmount = parseFloat({{ $accounts->yearly_taksiran_amt }});
        const currentAmount = parseFloat({{ $accounts->current_taksiran_amt }});
        const perluAmount = parseFloat({{ $accounts->payment_amt }});
    
        function handlePaymentSelection() {
            const setahunRadio = document.getElementById('radio_setahun');
            const sepenggalRadio = document.getElementById('radio_sepenggal');
            const perluRadio = document.getElementById('radio_perlu');
            const lainRadio = document.getElementById('radio_lain');
            const lainAmountContainer = document.getElementById('lain_amount_container');
            const lainAmount = document.getElementById('lain_amount');
            const paymentAmount = document.getElementById('payment_amount');
    
            if (lainRadio.checked) {
                lainAmountContainer.style.display = 'block';
                lainAmount.disabled = false;
                lainAmount.focus();
                if (lainAmount.value) {
                    updatePaymentAmount(lainAmount);
                } else {
                    paymentAmount.value = '';
                }
            } else {
                lainAmountContainer.style.display = 'none';
                lainAmount.disabled = true;
                document.getElementById('lain_amount_error').style.display = 'none'; // Hide error message
                if (setahunRadio.checked) {
                    paymentAmount.value = yearlyAmount.toFixed(2);
                    console.log('Setahun selected, amount:', paymentAmount.value);
                } else if (sepenggalRadio.checked) {
                    paymentAmount.value = currentAmount.toFixed(2);
                    console.log('Sepenggal selected, amount:', paymentAmount.value);
                }else if (perluRadio.checked) {
                    paymentAmount.value = perluAmount.toFixed(2);
                    console.log('Perlu selected, amount:', paymentAmount.value);
                }
            }
        }
    
        function updatePaymentAmount(inputElement) {
            const paymentAmount = document.getElementById('payment_amount');
            const errorElement = document.getElementById('lain_amount_error');
    
            // Validate the value of the custom amount
            const value = parseFloat(inputElement.value);
    
            if (document.getElementById('radio_lain').checked) {
                if (!value || value < 10.00) {
                    errorElement.style.display = 'block';
                    paymentAmount.value = ''; // Clear payment amount if invalid
                    inputElement.focus(); // Refocus the input field
                } else {
                    errorElement.style.display = 'none';
                    paymentAmount.value = value.toFixed(2); // Update payment amount if valid
                }
            }
        }
    
        function validateForm() {
        const radios = document.querySelectorAll('input[name="payment_type"]');
        const lainRadio = document.getElementById('radio_lain');
        const lainAmount = document.getElementById('lain_amount');
        const radioError = document.getElementById('radio_error');
        const amountError = document.getElementById('lain_amount_error');

        let isRadioChecked = false;

        // Check if any radio button is selected
        radios.forEach(radio => {
            if (radio.checked) {
                isRadioChecked = true;
            }
        });

        if (!isRadioChecked) {
            radioError.style.display = 'block';
            return false; // Prevent form submission
        }

        // If "Lain-lain" is selected, validate the custom amount
        if (lainRadio.checked) {
            const value = parseFloat(lainAmount.value);

            if (!value || value < 10.00) {
                amountError.style.display = 'block';
                lainAmount.focus();
                return false; // Prevent form submission
            } else {
                amountError.style.display = 'none'; // Hide error message if valid
            }
        }

        return true; // Allow form submission
    }
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            handlePaymentSelection();
            document.querySelectorAll('input[name="payment_type"]').forEach(radio => {
                radio.addEventListener('change', handlePaymentSelection);
            });
        });
    </script> --}}
@endsection