@extends('layouts.peyatim.app')
@section('content')
    <div class="container">
        <div class="col-md-12 mt-4">
            {{-- @include('errors')
        @include('layouts.messages') --}}
            <form action="{{ route('sumbang') }}" method="POST" id="paymentform">
                @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>SUMBANGAN PEYATIM</strong></h5>
                        </div>
                        
                    </div>
                    <div class="card-body">
                        @if ($peserta)
                            <div class="row justify-content-center mb-2">
                                <div class="col-md-9">
                                    <h5 class="fw-bold">1. Butiran Penyumbang</h5>
                                </div>
                            </div>
                            <input type="hidden" name="ref_link" value="{{ $peserta->ref_link }}">
                            <div class="row justify-content-center">
                                <div class="col-md-9">
                                    <div class="row align-items-center mb-3">
                                        <label for="nama" class="col-md-3 col-form-label fw-bold text-md-end">Nama</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="nama" value="{{ $peserta->name }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="alamat1" class="col-md-3 col-form-label fw-bold text-md-end">Nombor HP</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="alamat1" value="{{ $peserta->phone }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="alamat1" class="col-md-3 col-form-label fw-bold text-md-end">Alamat 1</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="alamat1" value="{{ $peserta->address1 }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="alamat2" class="col-md-3 col-form-label fw-bold text-md-end">Alamat 2</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="alamat2" value="{{ $peserta->address2 }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="poskod" class="col-md-3 col-form-label fw-bold text-md-end">Poskod</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="poskod" value="{{ $peserta->postcode }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="bandar" class="col-md-3 col-form-label fw-bold text-md-end">Bandar</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="bandar" value="{{ $peserta->city }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="negeri" class="col-md-3 col-form-label fw-bold text-md-end">Negeri</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="negeri" value="{{ $peserta->state }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row align-items-center mb-3">
                                        <label for="negara" class="col-md-3 col-form-label fw-bold text-md-end">Negara</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control rounded-3" id="negara" value="{{ $peserta->country }}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center my-2">
                                <div class="col-md-9">
                                    <h5 class="fw-bold">2. Butiran Sumbangan</h5>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-md-9">
                                    <div class="row align-items-center mb-3">
                                        <label for="emel" class="col-md-3 col-form-label fw-bold text-md-end">Emel <span class="text-danger">*</span></label>
                                        <div class="col-md-9">
                                            <input type="email" class="form-control rounded-3" id="emel" name="emel" placeholder="Masukkan emel anda..." required>
                                        </div>
                                    </div>

                                    <div class="row align-items-center">
                                        <label for="amount" class="col-md-3 col-form-label fw-bold text-md-end">Infaq / Sumbangan Tunai Kepada PEYATIM (RM) <span class="text-danger">*</span></label>
                                        <div class="col-md-9">
                                            <input type="number" step="0.01" min="1" class="form-control rounded-3" id="amount" name="amount" placeholder="0.00" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="row justify-content-center">
                                <div class="col-md-8 text-center py-4">
                                    <p class="text-danger fw-bold mb-0">Rekod tidak dijumpai / Record not found.</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    @if ($peserta)
                        <div class="row mb-4">
                            <div class="col text-center">
                                <button type="submit" class="btn" style="background-color: #383838; color: #f0f0f0;"
                                    >Bayar</button>
                            </div>
                        </div>
                    @endif
                </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