{% extends "users/base.html"%}

{% block title %}
Crypto Project
{% endblock %}

{% block content %}
<section id="topBar" class="flex items-center justify-between pt-3 pb-3 pr-5 pl-5 bg-blue-1">
    <div>
        <h1 class="text-white font-bold text-xl">KYC Form</h1>
    </div>
    <div style="width:200px;" class="text-white">
        <div>
            <div class="flex items-center justify-center gap-2">
                <p>{{ $username }}</p>
                <div>
                    <svg fill="white" style="width:30%;height:auto;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M759.2 419.8L697.4 358 512 543.4 326.6 358l-61.8 61.8L512 667z"/></svg>
                </div>
            </div>
            
            <p class="font-bold text-sm">{{ $email }}</p>
        </div>
    </div>
</section>

<section class="mt-3 p-5 flex justify-around gap-5">
    <div class="bg-blue-100 px-20 py-10 rounded-xl">
        <h3 class="font-bold text-blue-1 text-md mb-10">Complete the form below to proceed with KYC Verification</h3>
        <div>
            <form class="" id="kycForm" method="POST">
                <div class="mb-5">
                    <label for="Full Name" class="block mb-2 text-sm font-bold text-blue-1">Full Name</label>
                    <input type="text" id="fullname" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <label for="Full Name" class="block mb-2 text-sm font-bold text-blue-1">Date of Birth</label>
                    <input type="date" id="dob" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <select id="gender" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                </div>
                <div class="mb-5">
                    <label for="Occupation" class="block mb-2 text-sm font-bold text-blue-1">Occupation</label>
                    <input type="text" id="occupation" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <label for="SSN" class="block mb-2 text-sm font-bold text-blue-1">SSN</label>
                    <input type="text" id="ssn" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <label for="Address" class="block mb-2 text-sm font-bold text-blue-1">Billing Address</label>
                    <input type="text" id="address" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <label for="Driver's License Front" class="block mb-2 text-sm font-bold text-blue-1">Driver's License (Front)</label>
                    <input type="file" id="driver_license_front" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>
                <div class="mb-5">
                    <label for="Driver's License Back" class="block mb-2 text-sm font-bold text-blue-1">Driver's License (Back)</label>
                    <input type="file" id="driver_license_back" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-ble-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>

                <div class="flex items-start mb-2">
                </div>
                <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit Application</button>
            </form>
        </div>
    </div>
</section>
{% endblock %}

{% block js %}
<script>
    $("#kycForm").submit(function(e){
        e.preventDefault();

        const formObject = {
            'driver_license_front': $("#driver_license_front")[0].files[0],
            'driver_license_back': $("#driver_license_back")[0].files[0],
            'fullname': $("#fullname").val(),
            'occupation': $("#occupation").val(),
            'dob': $("#dob").val(),
            'ssn': $("#ssn").val(),
            'address': $("#address").val(),
            'gender': $("#gender").val(),
            'address': $("#address").val(),
        }
        
        let fd = new FormData();
        for(let i=0; i<Object.keys(formObject).length; i++){
            const objectKey = Object.keys(formObject)[i];
            const objectValue = formObject[Object.keys(formObject)[i]];
            console.log(objectKey);
            console.log(objectValue);
            //fd.append(Object.keys(formObject)[i], formObject[Object.keys(formObject)[i]]);
            fd.append(objectKey, objectValue);
        }

        console.log(Object.keys(formObject));

        //const formElement = document.querySelector("#kycForm");
        //fd = new FormData(formElement);

        $.ajax({
            url: '{% url submitKYC %}',
            type: 'post',
            data: fd,
            processData: false,
            contentType: false,
            success: function(response){
                const result = JSON.parse(response);
                switch(result.status){
                    case 'success':
                        Swal.fire({
                            title: 'Success',
                            text: `${result.msg}`,
                            icon: 'success',
                            confirmButtonText: 'Okay'
                        }).then((outcome) => {
                            if(outcome.isConfirmed){
                                window.location = "{% url dashboard %}";
                            }
                        })
                        break;
                    case 'error':
                        Swal.fire({
                            title: 'Error',
                            text: `${result.msg}`,
                            icon: 'error',
                            confirmButtonText: 'Okay',
                        })
                }

            }
        })
    })
</script>
{% endblock %}