{{-- --------------------------- Link BVN modal --------------------------- --}}

<!-- Button trigger modal -->
{{-- <button type="button" class="btn btn-primary" hidden  data-bs-toggle="modal" data-bs-target="#link-bvn">
    Launch demo modal
</button> --}}

<!-- Modal -->
<div class="modal fade" id="link-bvn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Link Your BVN</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-2">
                        <label class="form-label">SELECT BANK</label>
                        <select class="form-select" name="bank_code" id="banks" aria-label="Default select example">

                        </select>
                    </div>
                    <div class="mb-2">
                        <label for="exampleInputEmail1" class="form-label">ACCOUNT NUMBER</label>
                        <input type="number" name="account_number" class="form-control" id="accountNumber"
                            aria-describedby="emailHelp">
                        {{-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> --}}
                    </div>
                    <div class="mb-2">
                        <label for="exampleInputPassword1" class="form-label">BVN</label>
                        <input type="number" name="user_bvn" class="form-control" id="user_bvn">
                    </div>
                    <p style="color: red; font-size: 12px" id="bvnError"></p>
                    <input type="text" value="{{ Auth::user()->first_name }}" hidden name="first_name"
                        id="first_name">
                    <input type="text" value="{{ Auth::user()->last_name }}" hidden name="last_name" id="last_name">
                    <input type="text" value="{{ Auth::user()->id }}" hidden name="user_id" id="user_id">

                    {{-- <div class="mb-2">
                        <label for="exampleInputPassword1" class="form-label">Middle Name</label>
                        <input type="number" name="user_bvn" class="form-control" id="user_bvn">
                    </div> --}}
                    {{-- <button type="submit" class="btn btn-primary">Submit</button> --}}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="closeBvnModal"
                    data-bs-dismiss="modal">Close</button>
                <button disabled type="button" id="LinkBvn" class="btn btn-primary">Link Now</button>
            </div>
        </div>
    </div>

</div>


<script>
    fetch("/assets/jsons/bank_list.json")
        .then((response) => response.json())
        .then((banks) => {
            // console.log("banks...", banks)
            banks.forEach(bank => {
                const option = document.createElement("option")
                option.value = bank.code
                option.text = bank.name
                document.querySelector("#banks").append(option)
            })
        })


    document.getElementById("banks").addEventListener("change", function() {

        $('#validLoader').remove();
        $('#account_msg').remove();
        var data = {
            "_token": "{{ csrf_token() }}",
            "account_number": document.getElementById("accountNumber").value,
            "bank_code": document.getElementById("banks").value
        }
        var accountNumberValue = document.getElementById("accountNumber").value
        if (accountNumberValue.length == 10) {
            $('#accountNumber').after(
                '<span id="validLoader" class="button--loading1 button_load acm"><span class="button__text1"></span>'
            );
            $.post("/verifyAccount", data, function(res) {
                $(".result").html(res);

                if (res.status == true) {

                    $('#accountNumber').after(
                        '<span id="account_msg"  class="text-color pt-4 font-xsss"><strong>' +
                        res.data.account_name + '</strong></span>');
                    $('#validLoader').remove();
                } else {
                    $('#accountNumber').after(
                        '<span id="account_msg" style="color:red" class="pt-4 font-xsss"><strong>' +
                        'Invalid Account Details' + '</strong></span>');
                    $('#validLoader').remove();
                }

            })
        }

    })

    document.getElementById("accountNumber").addEventListener("keyup", function(e) {

        // let fName = document.getElementById("first_name")
        let accNum = e.target.value
        var data = {
            "_token": "{{ csrf_token() }}",
            "account_number": document.getElementById("accountNumber").value,
            "bank_code": document.getElementById("banks").value,

        }

        let accountNameSpan = document.getElementById("account_msg")

        if (accNum.length == 10) {
            if (!accountNameSpan) {
                $('#accountNumber').after(
                    '<span id="validLoader" class="button--loading1 button_load acm"><span class="button__text1"></span>'
                );
                console.log("data..", data)
                $.post("/verifyAccount", data, function(res) {
                    $(".result").html(res);
                    if (res.status == true) {

                        $('#accountNumber').after(
                            '<span id="account_msg"  class="text-color pt-4 font-xsss"><strong>' +
                            res.data.account_name + '</strong></span>');
                        $('#validLoader').remove();
                    } else {
                        $('#accountNumber').after(
                            '<span id="account_msg" style="color:red" class="pt-4 font-xsss"><strong>' +
                            'Invalid Account Details' + '</strong></span>');
                        $('#validLoader').remove();
                    }
                    console.log("res", res)

                })
            }
        } else {
            $('#validLoader').remove();
            $('#account_msg').remove();
        }
    })

    document.getElementById("LinkBvn").addEventListener("click", function() {
        document.getElementById("LinkBvn").innerText = "Wait..."
        document.getElementById("LinkBvn").setAttribute("disabled", true)

        var data = {
            "_token": "{{ csrf_token() }}",
            "bvn": document.getElementById("user_bvn").value,
            "account_number": document.getElementById("accountNumber").value,
            "bank_code": document.getElementById("banks").value,
            "first_name": document.getElementById("first_name").value,
            "last_name": document.getElementById("last_name").value
        }
        console.log("data...", data)
        $.post("/linkBvn", data, function(res) {
            $(".result").html(res);
            if (res.status == true) {
                if (res.data.account_number && res.data.last_name) {
                    var data2 = {
                        "_token": "{{ csrf_token() }}",
                        "bvn": res.data.bvn,
                        "user_id": document.getElementById("user_id").value,
                    }
                    // console.log("data2...", data2)
                    $.post("/updateBvn", data2, function(res2) {
                        $(".result").html(res2);

                        if (res2.status == true) {
                            document.getElementById("closeBvnModal").click()
                            setTimeout(() => {

                                swal({
                                    title: "Success!",
                                    text: 'Bvn Linked!',
                                    icon: "success",
                                });
                            }, 1000);

                            location.reload();
                        }

                    })
                } else {
                    swal({
                        title: "Error!",
                        text: 'Provided info not match!',
                        icon: "error",
                    })
                    location.reload();
                }
            } else {
                swal({
                    title: "Error!",
                    text: 'Failed to verify your bvn, please try again',
                    icon: "error",
                })
                location.reload();
            }
            // console.log("res", res)
        })
    })

    document.getElementById("user_bvn").addEventListener("keyup", function(e) {
        var linkBtn = document.getElementById("LinkBvn")
        var bvnError = document.getElementById("bvnError")
        if (e.target.value.length == 11) {
            linkBtn.removeAttribute("disabled")
            bvnError.innerText = ""
        } else if (e.target.value.length > 11) {
            linkBtn.setAttribute("disabled", true)
            bvnError.innerText = "Bvn cannot be more than 11 digits"
        } else {
            linkBtn.setAttribute("disabled", true)
            bvnError.innerText = "Bvn must be 11 digits"
        }
    })


    // const testing = (bvn) => {
    //     alert("hello")
    //     const data = {
    //         bvn
    //     };

    //     fetch(`https://vapi.verifyme.ng/v1/verifications/identities/bvn/${bvn}`, {
    //             method: 'POST',
    //             headers: {
    //                 'Content-Type': 'application/json',
    //                 "_token": "{{ csrf_token() }}",
    //                 // 'Authorization: Bearer <your secret key>'
    //             },
    //             body: JSON.stringify(data),
    //         })
    //         .then((response) => response.json())
    //         .then((data) => {
    //             console.log('Success:', data);
    //         })
    //         .catch((error) => {
    //             console.error('Error:', error);
    //         });

    // }
</script>