@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="col-md-12 mt-4">

            <form action="{{ route('peyatimpayment.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>Sumbangan Peyatim</strong></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h5>Maklumat Akaun</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="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->donator_name }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="form-group row col-md-12">
                                            <label for="phone" class="col-sm-4 col-form-label text-sm-right pt-1">No
                                                Telefon</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="phone"
                                                    value="{{ $accounts->mobile_no }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>

                            <!-- Right Column -->
                            <div class="col-md-6">
                                <div class="row mb-2">
                                    <div class="form-group row col-md-12">
                                    </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><span
                                                    class="text-danger">*</span></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') ?? '' }}"
                                                    required>
                                                <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>Jumlah Bayaran (RM)</strong><span class="text-danger">*</span>
                                            </label>
                                            <div class="col-sm-8">
                                                <input type="text" name="nilai_bayaran" id="nilai_bayaran"
                                                    class="form-control" inputmode="decimal" placeholder="0.00" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="ref_link" id="ref_link" value="{{ $accounts->ref_link }}">
                                <input type="hidden" name="payment_amount" id="payment_amount" value="">
                            </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.getElementById('nilai_bayaran').addEventListener('input', function(e) {
            let value = e.target.value;

            // Remove invalid characters
            value = value.replace(/[^0-9.]/g, '');

            // Allow only one decimal point
            let parts = value.split('.');
            if (parts.length > 2) {
                value = parts[0] + '.' + parts[1];
            }

            // Limit decimal to 2 places
            if (parts[1]) {
                parts[1] = parts[1].substring(0, 2);
                value = parts[0] + '.' + parts[1];
            }

            e.target.value = value;
        });
    </script>
@endsection