@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Add Fund</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Wallet</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Add Fund</div>
        </li>
    </ul>
</div>
<!-- new-category -->
<div class="wg-box">
    <form class="form-new-product form-style-1" method="post" action="{{route('shop-bo.wallet.store')}}">
        @csrf
        @honeypot
        <div class="alert alert-danger" role="alert" id="uniqueidMsg" style="display:none;font-size:13px">SATELLITE & BRANCH MANAGER ONLY</div>
        <div class="alert alert-success" role="alert" id="name" style="display:none;font-size:13px"></div>
        <fieldset>
            <div class="body-title">ID Number<span class="tf-color-1">*</span></div>
            <input class="flex-grow  @error('id_number') is-invalid @enderror" type="text" placeholder="ID Number" name="id_number" onkeyup="checkUser(this)" value="{{old('id_number')}}">
            @error('id_number')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror

        </fieldset>
        {{-- <span  id="name" style="display:none; font-weight:bold;color:green;font-size:13px"></span> --}}
        {{-- <span class="invalid-feedback ml-5" role="alert" id="uniqueidMsg" style="display:none;font-size:13px">Incorrect ID Number</span> --}}
        <fieldset>
            <div class="body-title">Amount <span class="tf-color-1">*</span></div>
            <input class="flex-grow  @error('amount') is-invalid @enderror" type="text" placeholder="Amount" name="amount" value="{{old('amount')}}" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
            @error('amount')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </fieldset>
        <div class="bot">
            <div></div>
            <button class="tf-button w208 confirm-form"  type="submit" data-confirm-message="Are you sure you want to add fund to this account?">Submit</button>
        </div>
    </form>
</div>
<!-- /new-category -->

@endsection
@section('page_script')
@parent
<script>
    $(".wallet-menu").addClass("active");

    let ajax_request = null;
    let debounce_timer;

    function checkUser(el) {
        clearTimeout(debounce_timer);

        debounce_timer = setTimeout(() => {
            if (ajax_request) ajax_request.abort();

            const value = $(el).val().trim();
            if (value === "") {
                $("#uniqueidMsg").hide();
                $("#name").hide().text('');
                $('button[type=submit], input[type=submit]').prop('disabled', false);
                return;
            }

            ajax_request = $.ajax({
                url: "{{ url('admin/shop-bo/wallet/get-user') }}/" + value,
                cache: false,
                success: function (response) {
                    if (response.exists) {
                        $("#uniqueidMsg").hide();
                        $('button[type=submit], input[type=submit]').prop('disabled', false);
                        $("#name").text(response.firstname + " " + response.surname).show();
                    } else {
                        $("#name").hide().text('');
                        $("#uniqueidMsg").show();
                        $('button[type=submit], input[type=submit]').prop('disabled', true);
                    }
                },
                complete: function () {
                    ajax_request = null;
                }
            });
        }, 400);
    }

    // var ajax_request;
    // var ajax_request = false;
    // function checkUser(el){

    //     if(ajax_request)
    //     ajax_request.abort()
    //     ajax_request = true;
    //     ajax_request = $.ajax({
    //         url : "{{url('admin/shop-bo/wallet/get-user')}}/"+($(el).val()==""?"0000000":$(el).val()),
    //         success : function(response){
    //             if(response.exists){
    //                 $("#uniqueidMsg").hide();
    //                 $('button[type=submit], input[type=submit]').prop('disabled', false);

    //                 $("#name").text(response.firstname + " " + response.surname).show();
    //             } else {
    //                 if(el.value === ""){
    //                     $("#uniqueidMsg").hide();
    //                     $('button[type=submit], input[type=submit]').prop('disabled', false);
    //                     $("#name").hide().text('');
    //                 } else {
    //                     $("#name").hide().text('');
    //                     $("#uniqueidMsg").show();
    //                     $('button[type=submit], input[type=submit]').prop('disabled', true);
    //                 }
    //             }
    //         }

    //     })
    // }
</script>
@endsection
<!-- App js -->