@extends('Frontend.layouts.master')
@section('style')
    <style>
        .error {
            color: red !important
        }

        .mandatory:before {
            content: "*";
            color: red
        }
    </style>
@endsection
@section('content')
    <div>
        <div class="kyc">
            <div class="accounts">
                <div class="acc-header container aos-init aos-animate" data-aos="fade-right">
                    <div>
                        <h2>Individual Accounts</h2>
                        <p>View all your individual accounts details from one place</p>
                    </div>
                </div>
            </div>

            <div class="container tab-form">
                <div class="row">
                    <div class="col-md-12 acc-list">
                        <div class="card2 first-screen show ml-2">
                            <form id="personalInformationForm" method="POST">
                                @csrf
                                <div class="pi-details">
                                    <h2>Complete your KYC</h2>
                                    <div>
                                        <h4>Personal Information</h4>
                                        <p>Provide your personal information as per your Bank Account</p>
                                    </div>
                                </div>
                                <div class="row form-sec">
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Name</label>
                                        <input type="text" id="name" name="name" placeholder="Enter Name"
                                            onkeydown="return /^[a-zA-Z\s]+$/i.test(event.key)"
                                            class="iv-input form-control p-2" value="{{$user->name}}">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Mobile Number</label>
                                        <input type="tel" id="mobile_number" name="mobile_number"
                                            placeholder="Enter Mobile Number" minlength="10" maxlength="10"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
                                            class="contact-number iv-input form-control p-2" value="{{$user->contact_number}}">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Email ID</label>
                                        <input type="email" id="email" name="email" placeholder="Enter Email"
                                            class="iv-input form-control p-2" value="{{$user->email}}">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Father's Name</label>
                                        <input type="text" id="father_name" name="father_name"
                                            placeholder="Enter Father's Name"
                                            onkeydown="return /^[a-zA-Z\s]+$/i.test(event.key)"
                                            class="iv-input form-control p-2">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Mother's Name</label>
                                        <input type="text" id="mother_name" name="mother_name"
                                            placeholder="Enter Mother's Name"
                                            onkeydown="return /^[a-zA-Z\s]+$/i.test(event.key)"
                                            class="iv-input form-control p-2">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Date Of Birth</label>
                                        <input type="date" id="dob" name="dob"
                                            class="iv-input form-control p-2" max="2006-01-11">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Place Of Birth</label>
                                        <input type="text" id="place_of_birth" name="place_of_birth"
                                            placeholder="Enter Place Of Birth"
                                            onkeydown="return /^[a-zA-Z\s]+$/i.test(event.key)"
                                            class="iv-input form-control p-2">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Gross Annual Income</label>
                                        <input type="number" id="gross_annual_income" name="gross_annual_income"
                                            placeholder="Enter Gross Annual Income" class="iv-input form-control p-2">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory">Occupation / Business</label>
                                        <input type="text" id="occupation" name="occupation"
                                            placeholder="Enter Occupation/Business"
                                            onkeydown="return /^[a-zA-Z\s]+$/i.test(event.key)"
                                            class="iv-input form-control p-2">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory" for="email">PAN Card</label>
                                        <input type="file" id="pan_card" name="pan_card"
                                            class="iv-input form-control p-2"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory" for="email">Proof Of Address (Aadhar (Preferable)/Passport
                                            (Preferable)/Driving License/Voter ID/Ration
                                            Card/ElectricityBill/Gas Bill/Telephone Bill)</label>
                                        <input type="file" id="proof_of_address" name="proof_of_address"
                                            class="iv-input form-control p-2"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                    </div>
                                    <div class="col-md-6 mb-4 mt-4">
                                        <label class="mandatory" for="resident">Photograph</label>
                                        <input type="file" id="Photograph" name="Photograph"
                                            class="iv-input form-control p-2"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory" for="dob">Cancelled Cheque / Bank Statement</label>
                                        <input type="file" id="cancelled_cheque" name="cancelled_cheque"
                                            class="acc-dropdown form-control p-2"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label class="mandatory" for="occupation">Copy of CML (Self-Attested)</label>
                                        <input type="file" id="copy_of_cml" name="copy_of_cml"
                                            class="acc-dropdown form-control p-2"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                    </div>
                                </div>
                                {{-- <h5 class="text-center"><b class="text-danger">"Note: All documents uploaded should be self-attested"</b></h5>
                            <h5 class="info"><i>"Please be advised that if additional documents or information are required, the
                                    Jericho Alternatives team will promptly
                                    contact you for further assistance."</i></h5> --}}
                                <button type="submit" id="individual_submit" class="next-button">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('scripts')
    <script>
        $(function() {
            var dtToday = new Date();

            var month = dtToday.getMonth() + 1; // jan=0; feb=1 .......
            var day = dtToday.getDate();
            var year = dtToday.getFullYear() - 18;
            if (month < 10)
                month = '0' + month.toString();
            if (day < 10)
                day = '0' + day.toString();
            var minDate = year + '-' + month + '-' + day;
            var maxDate = year + '-' + month + '-' + day;
            $('#dob').attr('max', maxDate);
        });

        $(document).ready(function() {
            $.validator.addMethod("ValidEmail", function(value) {
                return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value);
            }, "Please enter valid email");
            $('#personalInformationForm').validate({
                ignore: [],
                debug: false,
                rules: {
                    name: 'required',
                    mobile_number: {
                        required: true,
                        digits: true,
                    },
                    email: {
                        required: true,
                        ValidEmail: true,
                    },
                    father_name: 'required',
                    mother_name: 'required',
                    dob: 'required',
                    place_of_birth: 'required',
                    gross_annual_income: 'required',
                    occupation: 'required',
                    pan_card: 'required',
                    proof_of_address: 'required',
                    Photograph: 'required',
                    cancelled_cheque: 'required',
                    copy_of_cml: 'required',
                },
                messages: {
                    name: 'Name is required',
                    mobile_number: {
                        required: "Mobile Number is required",
                        minlength: "Phone number must be 10 digits",
                        maxlength: "Phone number must be 10 digits",
                    },
                    email: 'Email is required',
                    father_name: "Father's Name is required",
                    mother_name: "Mother's Name is required",
                    dob: 'Date Of Birth is required',
                    place_of_birth: 'Place of Birth is required',
                    gross_annual_income: 'Gross Annual Income is required',
                    occupation: 'Occupation / Business is required',
                    pan_card: 'PAN Card is required',
                    proof_of_address: 'Proof Of Address is required',
                    Photograph: 'Photograph is required',
                    cancelled_cheque: 'Cancelled cheque is required',
                    copy_of_cml: 'Copy of CML is required',
                },
                submitHandler: function(form) {
                    var formData = new FormData(form);
                    // $('#individual_submit').prop('disabled', true);
                    $.ajax({
                        url: "{{ route('create-individual-kyc') }}",
                        type: 'POST',
                        data: formData,
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(result) {
                            if (result.status === 200) {
                                toastr.success(result.message);
                                setTimeout(() => {
                                    location.replace("/kyc");
                                }, 1000);
                            }
                        },
                        error: function(jqXHR) {
                            $("#request_callback_btn").removeClass("d-none");
                            $("#loaderContactBtn").addClass("d-none");
                            warning(jqXHR.responseJSON);
                            // warning(jqXHR.responseJSON.errors);
                        },
                    })
                }
            })
        })
    </script>
@endsection