@extends('layouts.app')
@section('title', __( 'lang_v1.dashboard' ))
@section('css')
<style>
    .method, .credit-box { padding: 18px; border: 2px solid #eee; border-radius: 10px; text-align: center; cursor: pointer; background: #fafafa; transition: all 0.3s ease; font-size: 15px; }
    .method:hover { border-color: #007bff; background: #f0f8ff; }
    .method.active { border-color: #007bff; background: #e6f0ff; box-shadow: 0 4px 12px rgba(0,123,255,0.2); }

    .credit-box:hover { border-color: #28a745; background: #f0fff5; }
    .credit-box.active { border-color: #28a745; background: #e9f7ef; box-shadow: 0 4px 12px rgba(40,167,69,0.2); }
    .credit-box strong { font-size: 17px; color: #222; }
    .credit-box span { display: block; margin-top: 6px; font-weight: bold; color: #28a745; font-size: 15px; }

    .payment-form { margin-top: 20px; display: none; }
    .payment-form.active { display: block; animation: fadeIn 0.4s ease; }

    /* Order Summary */
    .summary { margin-top: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; }
    .summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; }
    .summary-row strong { color: #333; }
    .total { font-size: 18px; font-weight: bold; color: #007bff; margin-top: 15px; text-align: right; }

    .btn-pay { display: block; width: 100%; padding: 15px; border: none; background: #007bff; color: #fff; border-radius: 8px; cursor: pointer; font-size: 17px; margin-top: 30px; transition: background 0.3s; }
    .btn-pay:disabled { background: #ccc; cursor: not-allowed; }


    /* --- Fancy Card Form --- */
    .card-panel {
    margin-top: 16px;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 18px;
    background: #fbfcfe;
    }
    .card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    }
    .card-title { font-size: 15px; font-weight: 600; color: #2b2f36; }
    .brand-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px dashed #cbd5e1; border-radius: 999px;
    font-size: 12px; color: #475569; background: #fff;
    }
    .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .input-full { grid-column: 1 / -1; }

    .input-with-icon {
    position: relative;
    }
    .input-with-icon svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; opacity: .6;
    }
    .input-with-icon input {
    width: 93%; padding: 12px 12px 12px 40px;
    border: 1px solid #d0d7e2; border-radius: 10px; background: #fff;
    font-size: 15px; transition: border-color .2s, box-shadow .2s;
    }
    .input-with-icon input:focus {
    border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    }
    .hint { margin-top: 6px; font-size: 12px; color: #64748b; }
    .error {
    margin-top: 6px; font-size: 12px; color: #b91c1c; display: none;
    }
    .input-with-icon.invalid input { border-color: #ef4444; }
    .input-with-icon.invalid + .error { display: block; }

    /* Small screens */
    @media (max-width: 520px) {
    .input-row { grid-template-columns: 1fr; }
    }

    #cardExpiry {
        width: 85% !important;
    }

    #cardCvv {
        width: 86% !important;
    }

    .panel-group {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Panel heading */
    .panel-heading {
        background: linear-gradient(90deg, #4fa3f7, #1c6ed5);
        color: #fff;
        cursor: pointer;
        padding: 15px 20px;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background 0.3s;
    }

    .panel-heading:hover {
        background: linear-gradient(90deg, #1c6ed5, #4fa3f7);
    }

    /* Panel title link */
    .panel-title a {
        color: #fff;
        text-decoration: none;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .panel-collapse.collapse.show + .panel-heading a::after,
    .panel-collapse.collapse.show ~ .panel-heading a::after {
        transform: rotate(180deg); /* arrow up when open */
    }

    /* Panel body */
    .panel-body {
        background-color: #f0f6fb;
        padding: 20px;
        border-top: 1px solid #d1e3f0;
    }
</style>
@endsection
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang( 'lang_v1.dashboard' )
        <!-- <small>@lang( 'user.manage_users' )</small> -->
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary credit-table', 'id' => 'remaining_credit1', 'title' => __( 'business.remaining_credit' ). ': '.$remaining_credit_now])
    <div class="table-responsive">
        <button type="submit" class="btn btn-primary" id="barcode_scanner">Barcode Scanner</button>
    </div>
    @endcomponent

    <div class="row">
        <div class="col-md-6">
            @component('components.widget', ['class' => 'box-primary credit-table', 'id' => 'remaining_credit2', 'title' => __( 'business.remaining_credit' ). ': '.$remaining_credit_now])
            {{-- @can('user.create') --}}
            @slot('tool')
            <div class="box-tools">
                <a class="btn btn-block btn-primary"
                    href="#">
                    <i class="fa fa-plus"></i> @lang( 'messages.add' )</a>
            </div>
            @endslot
            {{-- @endcan --}}
            {{-- @can('user.view') --}}
            <h3>VH-AI Transactions</h3>
            <table class="table table-bordered table-striped" id="dashboard_table">
                <thead>
                    <tr>
                        <th class="credit-table-th-medium">@lang( 'user.name' )</th>
                        <th class="credit-table-th-medium">@lang( 'business.transaction_type' )</th>
                        <th class="credit-table-th-medium">@lang( 'business.credit' )</th>
                        <th class="credit-table-th-medium">@lang( 'business.remaining_credit' )</th>
                        <th class="credit-table-th-medium">@lang( 'business.description' )</th>
                        <th class="credit-table-th-medium">@lang( 'business.transaction_time' )</th>
                    </tr>
                </thead>
            </table>
            {{-- @endcan --}}
            @endcomponent
        </div>
        <div class="col-md-6" style="background-color: #c3d8ea;">
            @component('components.widget', ['class' => 'box-primary credit-table', 'style' => 'background-color: #d4e1ed;'])
            
            <div class="panel-group m-bottom-0" id="accordion">
            <div class="panel panel-default">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <div class="panel-heading">
                    <h4 class="panel-title text-center">
                            @lang('business.refresh_credits')
                    </h4>
                </div>
                </a>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body">
                        {{-- <form action="" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="credit_amount">@lang('business.credit_amount')</label>
                                <input type="number" class="form-control" id="credit_amount" name="credit_amount" required>
                            </div>
                            <div class="form-group">
                                <label for="first_name">@lang('business.first_name')</label>
                                <input type="text" class="form-control" id="first_name" name="first_name" required>
                            </div>
                            <div class="form-group">
                                <label for="last_name">@lang('business.last_name')</label>
                                <input type="text" class="form-control" id="last_name" name="last_name" required>
                            </div>
                            <div class="form-group">
                                <label for="address">@lang('business.address')</label>
                                <input type="text" class="form-control" id="address" name="address" required>
                            </div>
                            <div class="form-group">
                                <label for="zip_code">@lang('business.zip_code')</label>
                                <input type="text" class="form-control" id="zip_code" name="zip_code" required>
                            </div>
                            <div class="form-group">
                                <label for="payment_method">@lang('business.payment_method')</label>
                                <select class="form-control" id="payment_method" name="payment_method" required>
                                    <option value="" disabled selected>@lang('business.select_payment_method')</option>
                                    <option value="credit_card">@lang('business.credit_card')</option>
                                    <option value="paypal">@lang('business.paypal')</option>
                                </select>
                            </div>
                            <div id="credit_card_details" style="display: none;">
                                <div class="form-group">
                                    <label for="credit_card_number">@lang('business.credit_card_number')</label>
                                    <input type="text" class="form-control" id="credit_card_number" name="credit_card_number">
                                </div>
                                <div class="form-group">
                                    <label for="valid_date_month">@lang('business.valid_date_month')</label>
                                    <input type="text" class="form-control" id="valid_date_month" name="valid_date_month" placeholder="MM" style="display: inline-block; width: 48%;">
                                    <label for="valid_date_year" style="display: inline-block; width: 48%; margin-left: 4%;">@lang('business.valid_date_year')</label>
                                    <input type="text" class="form-control" id="valid_date_year" name="valid_date_year" placeholder="YYYY" style="display: inline-block; width: 48%;">
                                </div>
                                <div class="form-group">
                                    <label for="ccv">@lang('business.ccv')</label>
                                    <input type="text" class="form-control" id="ccv" name="ccv">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary" id="submit_button">@lang('business.pay')</button>
                        </form> --}}
                        <!-- <h2>Checkout</h2> -->

                        <!-- Credits -->
                        <div class="credit-options">
                            <h3 class="m-top-0">Buy AI Credits</h3>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                                @foreach($credits as $credit)
                                    <div class="credit-box credit-option"
                                        data-id="{{ $credit->id }}"
                                        data-price="{{ $credit->price }}"
                                        data-credit="{{ $credit->credits }}">
                                        <strong>{{ $credit->name }}</strong><br>
                                        {{ $credit->credits }} credits
                                        <span>${{ $credit->price }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Payment Methods -->
                        <div class="payment-options" style="display: none;">
                            <h3>Choose Payment Method</h3>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px;">
                                <div class="method" data-method="credit_card" data-fee="0">💳 Credit Card</div>
                                <div class="method" data-method="paypal" data-fee="2">🅿️ PayPal (+$2 fee)</div>
                                <div class="method" data-method="apple_pay" data-fee="0">🍏 Apple Pay</div>
                                <div class="method" data-method="google_pay" data-fee="0">🤖 Google Pay</div>
                            </div>
                        </div>

                        <!-- Payment Forms -->
                        <div id="form-credit_card" class="payment-form">
                            <div class="card-panel">
                                <div class="card-header">
                                    <div class="card-title">Enter Card Details</div>
                                    <div class="brand-badge" id="cardBrandBadge">
                                        <span id="cardBrandText">Unknown</span>
                                    </div>
                                </div>

                                <div class="input-row">
                                <!-- Card Number -->
                                <div class="input-with-icon input-full" id="wrapCardNumber">
                                    <!-- credit-card icon -->
                                    <svg viewBox="0 0 24 24" fill="none"><rect x="2" y="5" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M2 9h20" stroke="currentColor" stroke-width="1.4"/></svg>
                                    <input id="cardNumber" type="text" onkeyup="onlyNumbers(this)" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456" maxlength="19">
                                    <!-- <div class="hint">We accept Visa, MasterCard, Amex</div> -->
                                    <div class="error">Please enter a valid card number.</div>
                                </div>

                                <!-- Expiry -->
                                <div class="input-with-icon" id="wrapExpiry">
                                    <!-- calendar icon -->
                                    <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="17" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M8 2v4M16 2v4M3 10h18" stroke="currentColor" stroke-width="1.4"/></svg>
                                    <input id="cardExpiry" type="text" inputmode="numeric" onkeyup="formatMMYY(this)" onblur="validateMMYY(this)" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5">
                                    <div class="error">Expiry must be MM/YY and valid.</div>
                                </div>

                                <!-- CVV -->
                                <div class="input-with-icon" id="wrapCvv">
                                    <!-- shield icon -->
                                    <svg viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6l7-3z" stroke="currentColor" stroke-width="1.4"/></svg>
                                    <input id="cardCvv" type="password" inputmode="numeric" autocomplete="cc-csc" placeholder="CVV" maxlength="4">
                                    <div class="hint">3 digits (Amex: 4 digits)</div>
                                    <div class="error">Invalid CVV.</div>
                                </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div id="form-paypal" class="payment-form"><h3>Pay with PayPal</h3><button type="button" class="btn-pay">Continue with PayPal</button></div>
                        <div id="form-apple_pay" class="payment-form"><h3>Apple Pay</h3><button type="button" class="btn-pay">Continue with Apple Pay</button></div>
                        <div id="form-google_pay" class="payment-form"><h3>Google Pay</h3><button type="button" class="btn-pay">Continue with Google Pay</button></div> -->

                        <!-- Order Summary -->
                        <div class="summary">
                            <div class="summary-row"><span>Payment Method Fee</span> <strong id="summary-method">$0</strong></div>
                            <div class="summary-row"><span>AI Credits</span> <strong id="summary-credit">$0</strong></div>
                            <div class="total">Total: <span id="summary-total">0</span></div>
                        </div>

                        <!-- Form -->
                        <form method="POST" action="{{ route('process.payment') }}">
                            @csrf
                            <input type="hidden" id="selectedMethod" name="payment_method">
                            <input type="hidden" id="selectedCredit" name="credit_id">
                            <input type="hidden" name="type" value="credits">
                            <button type="button" id="payBtn" class="btn-pay" onclick="paymentStripe()" disabled>Proceed to Pay</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {{-- <script>
            document.getElementById('payment_method').addEventListener('change', function() {
                var creditCardDetails = document.getElementById('credit_card_details');
                var submitButton = document.getElementById('submit_button');

                if (this.value === 'credit_card') {
                    creditCardDetails.style.display = 'block';
                    submitButton.textContent = '@lang('
                    business.pay ')';
                } else if (this.value === 'paypal') {
                    creditCardDetails.style.display = 'none';
                    submitButton.textContent = '@lang('
                    business.continue_with_paypal ')';
                } else {
                    creditCardDetails.style.display = 'none';
                    submitButton.textContent = '@lang('
                    business.pay ')';
                }
            });
        </script> --}}
        @endcomponent
    </div>
    </div>



    <div class="modal fade user_modal" tabindex="-1" role="dialog"
        aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->
<style>
    .credit-table {
        width: 100% !important;
    }

    .credit-table-th-medium {
        background-color: #f4f4f4 !important;
        color: #333 !important;
        width: 10% !important;
    }

    .content-header h1 {
        color: #3c8dbc;
        font-size: 24px;
    }

    .box-tools .btn-primary {
        background-color: #00a65a;
        border-color: #008d4c;
    }

    .table-responsive {
        margin-top: 20px;
        width: 100%;
    }

    .table thead th {
        background-color: #f4f4f4;
        color: #333;
    }
</style>
@stop
@section('javascript')
<script type="text/javascript">
    //Roles table
    var users_table;
    $(document).ready(function() {
        $('#accordion .panel-heading').click(function() {
            // toggle active arrow icon
            $(this).find('a').toggleClass('active');
        });
        var barcodeScannerButton = document.getElementById('barcode_scanner');
        barcodeScannerButton.addEventListener('click', function(event) {
            event.preventDefault();
            window.location.href = '/barcode/scan';
        });
        
        users_table = $('#dashboard_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/dashboard-vhomni',
            dom: '<lrf<t>ip',
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, 'All']
            ],
            "columns": [{
                    "data": "name"
                },
                {
                    "data": "transaction_type"
                },
                {
                    "data": "credits"
                },
                {
                    "data": "remaining_credits"
                },
                {
                    "data": "description"
                },
                {
                    "data": "transaction_time"
                }
            ],
            scrollX: true,
            scrollCollapse: true,
        });
    });

    let methodFee = 0;
    let creditPrice = 0;
    let creditSelected = 0;

    function updateSummary() {
        var total = methodFee + parseFloat(creditPrice);
        document.getElementById('summary-method').innerText = `$${methodFee}`;
        document.getElementById('summary-credit').innerText = `$${creditPrice}`;
        document.getElementById('summary-total').innerText = `$${parseFloat(total).toFixed(2)}`;
    }

    // Payment method selection
    document.querySelectorAll('.method').forEach(el => {
        el.addEventListener('click', () => {
            // document.querySelectorAll('.method').forEach(m => m.classList.remove('active'));
            // document.querySelectorAll('.payment-form').forEach(f => f.classList.remove('active'));

            // el.classList.add('active');
            // document.getElementById('selectedMethod').value = el.dataset.method;
            // document.getElementById('form-' + el.dataset.method).classList.add('active');

            // methodFee = parseFloat(el.dataset.fee) || 0;
            // updateSummary();

            // document.getElementById('payBtn').disabled = false;
            document.querySelectorAll('.method').forEach(m => m.classList.remove('active'));
            document.querySelectorAll('.payment-form').forEach(f => f.classList.remove('active'));

            el.classList.add('active');
            document.getElementById('selectedMethod').value = el.dataset.method;
            if(el.dataset.method=="credit_card")
            {
                document.getElementById('form-' + el.dataset.method).classList.add('active');
            }
            methodFee = parseFloat(el.dataset.fee) || 0;
            updateSummary();

            document.getElementById('payBtn').disabled = false;
        });
    });

    // Credit selection
    document.querySelectorAll('.credit-option').forEach(el => {
        el.addEventListener('click', () => {
            document.querySelectorAll('.credit-option').forEach(c => c.classList.remove('active'));
            el.classList.add('active');

            document.getElementById('selectedCredit').value = el.dataset.id;
            creditSelected = el.dataset.credit;
            creditPrice = parseFloat(el.dataset.price).toFixed(2) || 0;
            document.getElementById('payBtn').disabled = false;
            updateSummary();
        });
    });

    function paymentStripe() {
        let summarytotal = $('#summary-total').html().replace('$', '').trim();
        $.ajax({
            type: 'POST',
            url: '/checkout/create-session',
            data: {
                amount_cents: (parseFloat(summarytotal) * 100),
                currency: 'usd',
                payment_to: 'virtualhills'
            },
            beforeSend: function() {
                $('#pos-loader').css('display', 'inline-flex')
            },
            success: function (result) {
                $('#pos-loader').css('display', 'none')
                var stripeUrl = result.url;
                var popupWidth = 1300;
                var popupHeight = 800;
                var left = (window.screen.width / 2) - (popupWidth / 2);
                var top = (window.screen.height / 2) - (popupHeight / 2);

                var popup = window.open(
                    stripeUrl,
                    'StripePopup',
                    `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=yes,scrollbars=yes,status=no`
                );

                if (popup) {
                    popup.focus();

                    // ✅ Tambahkan listener di sini
                    const messageHandler = function (event) {
                        if (event.data.type === 'stripe_status') {
                            if (event.data.status === 'success') {
                                window.removeEventListener('message', messageHandler);
                                clearInterval(checkPopup);
                                popup.close();
                                /* swal({
                                    title: 'Payment Received',
                                    icon: 'success',
                                }) */
                                  
                                $.ajax({
                                    type: 'POST',
                                    url: '/process/ai-credits',
                                    data: {
                                        credit: creditSelected,
                                    },
                                    beforeSend: function() {
                                        $('#pos-loader').css('display', 'inline-flex')
                                    },
                                    success: function (result) {
                                        $('#pos-loader').css('display', 'none')
                                        swal({
                                            title: 'Successfully',
                                            text: 'Payment Received',
                                            icon: 'success',
                                            // buttons: true,
                                            dangerMode: true,
                                        })
                                        var remaining_credit = $('#remaining_credit1 .box-title').html().replace('Remaining Credit: ', '').trim();
                                        var credit_now = parseInt(remaining_credit) + parseInt(creditSelected);
                                        $('#remaining_credit1 .box-title').html('Remaining Credit: ' + credit_now);
                                        $('#remaining_credit2 .box-title').html('Remaining Credit: ' + credit_now);
                                        users_table.ajax.reload(null, false); // ✅ reload the DataTable
                                    },
                                    error: function(result) {
                                        $('#pos-loader').css('display', 'none')
                                        swal({
                                            title: 'Information',
                                            text: 'Error added credits',
                                            icon: 'warning',
                                            // buttons: true,
                                            dangerMode: true,
                                        })
                                    }
                                })
                            } else if (event.data.status === 'cancel') {
                                window.removeEventListener('message', messageHandler);
                                clearInterval(checkPopup);
                                popup.close();
                                swal({
                                    title: 'Information',
                                    text: 'Payment canceled by customer',
                                    icon: 'warning',
                                    // buttons: true,
                                    dangerMode: true,
                                })
                            }
                        }
                    };
                    window.addEventListener('message', messageHandler);

                    var checkPopup = setInterval(function () {
                        if (popup.closed) {
                            clearInterval(checkPopup);
                            console.log('Popup closed manually');
                            onStripeClosed();
                            window.removeEventListener('message', messageHandler);
                            // Kalau mau anggap ini sebagai gagal
                            swal({
                                title: 'Information',
                                text: 'Popup closed before completing payment',
                                icon: 'warning',
                                // buttons: true,
                                dangerMode: true,
                            })
                        }
                    }, 500);
                }
            },
            error: function (error) {
                $('#pos-loader').css('display', 'none');
                swal({
                    title: 'Information',
                    text: 'Error creating Stripe session',
                    icon: 'warning',
                    // buttons: true,
                    dangerMode: true,
                })
            },
        });
    }

    function onStripeClosed() {
        console.log('Stripe popup closed detected');
        swal({
            title: 'Information',
            text: 'Payment was canceled (popup closed)',
            icon: 'warning',
            dangerMode: true,
        });
    }


    function formatMMYY(input) {

        let value = input.value.replace(/[^0-9]/g, ''); // hanya angka

        if (value.length >= 2) {

            value = value.substring(0,2) + '/' + value.substring(2,4);

        }

        input.value = value;

    }
    
    function validateMMYY(input) {
        const regex = /^(0[1-9]|1[0-2])\/\d{2}$/;
        const now = new Date();
        const currentYear = now.getFullYear() % 100; // ambil 2 digit tahun (YY)
        const currentMonth = now.getMonth() + 1; // 1–12
        if (!regex.test(input.value)) {

            //alert("Format harus MM/YY dengan bulan 01–12!");

            // swal('Format harus MM/YY dengan bulan 01–12!');

            // swal({
            //     title: 'Warning',
            //     text: 'Format harus MM/YY dengan bulan 01–12!',
            //     icon: "warning",
            //     buttons: false,
            //     // dangerMode: true,
            // }).then((willDelete) => {
                
            // });

            input.focus();
            return false;
        }
    
        const parts = input.value.split("/");
        const month = parseInt(parts[0], 10);
        const year = parseInt(parts[1], 10);
        // cek expired
        if (year < currentYear || (year === currentYear && month < currentMonth)) {
            // swal('Tanggal sudah kadaluarsa!');
            // alert("Tanggal sudah kadaluarsa!");
            swal({
                title: 'Warning',
                text: 'Your Card is Expired!',
                icon: "warning",
                buttons: false,
                // dangerMode: true,
            }).then((willDelete) => {
                
            });
            input.focus();
            return false;
        }
        return true;
    }
    function onlyNumbers(input) {
        // Hanya izinkan angka 0-9
        input.value = input.value.replace(/[^0-9]/g, '');

    }
    function onlyLetters(input) {

        // Hanya izinkan huruf (a-z, A-Z) dan spasi

        input.value = input.value.replace(/[^a-zA-Z\s]/g, '');

    }
</script>
@endsection