@include('front.layouts.old_header')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<style>
    h3{
        display: inline-block;
    }
    hr{
        visibility: hidden !important;
    }
    label{
        font-size: 10px !important;
        font-weight: 600 !important;
    }
    .required{
        color: red !important;
    }
    .form-row>.col, .form-row{
        padding-right: 20px;
        padding-left: 20px;
    }

    select, input[type='date']{
        display: block !important;
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* For Firefox */
    input[type='number'] {
        -moz-appearance:textfield;
    }
    /* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .was-validated .form-control:valid{
        border-color: #ced4da;
    }

    .invalid{
        border-color: #dc3545!important;
    }

    .hide{
        display: none!important;
    }

    a{
        color: #4a1481!important;
        text-decoration: underline !important;
    }

    [type=checkbox]:checked+label:before{
        border-color: transparent #4a1481 #4a1481 transparent;
    }

</style>
<main id="application" class="container my-4 mb-5">
    <div id="form">
        <div class="my-4 text-center">
            <span class="font-weight-bold" style="font-size: 24px">Welcome to Credit Fair</span><br />
            <span class="mt-3" style="font-size: 19px">You can apply for Easy EMI plans in just a few minutes!</span>
        </div>
        <div id="form-card" class="card container my-4 mb-5 p-2">
            <form id="co-partner-form" class="needs-validation" novalidate="" method="POST" action="{{ asset('api/co-partner/application-submit') }}" enctype="multipart/form-data">
                {{-- Section 1 --}}
                <div class="m-4">
                    <h3 class="m-0">Personal Details </h3>
                    <div class="my-4 mx-2">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="pan">Pan Card ID <span class="required">*</span></label>
                                <input type="text" class="form-control" name="pan" placeholder="XXXXX0000X" onkeyup="this.value = this.value.toUpperCase()" value="" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="aadhaar_card">Aadhaar</label>
                                <input type="text" class="form-control" name="aadhaar_card" placeholder="123456789XXX" minlength="12" maxlength="12">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="first_name">Applicant First Name <span class="required">*</span></label>
                                <input type="text" class="form-control" name="first_name" placeholder="John" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="last_name">Applicant Last Name <span class="required">*</span></label>
                                <input type="text" class="form-control" name="last_name" placeholder="Doe" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="mobile_number">Mobile Number <span class="required">*</span></label>
                                <input type="text" class="form-control" name="mobile_number" placeholder="9967235047" required onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="10" maxlength="10">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="preferred_language">Loan Agreement Language <span class="required">*</span></label>
                                <select id="preferred_language" name="preferred_language" class="form-control" required>
                                    <option value="">Select a language</option>
                                    <option value="ENGLISH">ENGLISH</option>
                                    <option value="HINDI">HINDI</option>
                                    <option value="MARATHI">MARATHI</option>
                                    <option value="GUJARATI">GUJARATI</option>
                                    <option value="BENGALI">BENGALI</option>
                                    <option value="PUNJABI">PUNJABI</option>
                                    <option value="TAMIL">TAMIL</option>
                                    <option value="TELUGU">TELUGU</option>
                                    <option value="KANNADA">KANNADA</option>
                                    <option value="MALAYALAM">MALAYALAM</option>
                                    <option value="URDU">URDU</option>
                                    <option value="ODIA">ODIA</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label for="gender">Gender <span class="required">*</span></label>
                                <select id="gender" name="gender" class="form-control" required>
                                    <option value="">Select Gender</option>
                                    <option value="MALE">Male</option>
                                    <option value="FEMALE">Female</option>
                                    <option value="Others">Others</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="dob">DOB <span class="required">*</span></label>
                                <input type="date" class="form-control" name="dob" id="dob" placeholder="Enter DOB" required max="{{ \Illuminate\Support\Carbon::now()->subYears(18)->format('Y-m-d') }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="email">Email <span class="required">*</span></label>
                                <input type="email" class="form-control" name="email" placeholder="email@address.com" required>
                            </div>
                        </div>
                        <div class="row">
                            @if(count($centers) > 0)
                                <div class="form-group col-md-6">
                                    <label for="center">Application Centre <span class="required">*</span></label>
                                    <select id="center" name="center" class="form-control" required>
                                        <option value="">Select Center</option>
                                        @foreach($centers as $center)
                                            <option value="{{ $center->id }}">{{ $center->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                            <div class="form-group col-md-6 hide">
                                <label for="purpose">Loan purpose</label>
                                <input type="text" class="form-control" name="purpose" placeholder="Enter purpose" value="{{$category ?? ''}}" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                {{-- Section 2 --}}
                <div class="m-4">
                    <h3 class="m-0">Employment Details </h3>
                    <div class="my-4 mx-3">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="employee_status">Employment type <span class="required">*</span></label>
                                <select id="employee_status" name="employee_status" class="form-control" required>
                                    <option value="">Select Employment type</option>
                                    <option value="SALARIED">SALARIED</option>
                                    <option value="BUSINESS">BUSINESS</option>
                                    <option value="HOUSEWIFE">HOUSEWIFE</option>
                                    <option value="PENSIONER">PENSIONER</option>
                                    <option value="Self Employed - Business">Self Employed - Business</option>
                                    <option value="Self Employed - Professional">Self Employed - Professional</option>
                                    <option value="UNEMPLOYED">UNEMPLOYED</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4 hide">
                                <label for="monthly_income">Monthly Income <span class="required">*</span></label>
                                <input type="number" class="form-control" name="monthly_income" placeholder="₹10000">
                            </div>
                            <div class="form-group col-md-4">
                                <label for="current_address_pincode">Current address pincode <span class="required">*</span></label>
                                <input type="text" class="form-control" name="current_address_pincode" placeholder="400001" required  onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="6" maxlength="6">
                            </div>
                        </div>
                        <div id="emp-details" class="form-row">
                            <div class="form-group col-md-6 hide">
                                <label id="company_label" for="company_name">Employer/Company Name <span class="required">*</span></label>
                                <input type="text" class="form-control" name="company_name" placeholder="Credit Fair">
                            </div>
                            <div class="form-group col-md-6 hide">
                                <label id="work_pincode_label" for="work_address_pincode">Office address pincode <span class="required">*</span></label>
                                <input type="text" class="form-control" name="work_address_pincode" placeholder="400010" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" minlength="6" maxlength="6">
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                {{-- Section 3 --}}
                <div class="m-4">
                    <h3 class="m-0">Order Details </h3>
                    <div class="my-4 mx-3">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="offer_id">Offer details <span class="required">*</span></label>
                                <select id="offer_id" name="offer_id" class="form-control" required>
                                    <option value="">Select Offer</option>
                                    @foreach($offers as $offer)
                                        <option value="{!! $offer->id !!}">{!! $offer->tenure !!} Months</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="unique_id_number">Unique ID Number / Order ID</label>
                                <input type="text" class="form-control" name="unique_id_number" placeholder="CF12345">
                                <small class="form-text text-muted">
                                    This number can be invoice number or student ID or any other unique number given by the merchant
                                </small>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="loan_amount">Loan Amount <span class="required">*</span></label>
                                <input type="text" class="form-control" name="loan_amount" placeholder="Enter Loan Amount" required onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">
                            </div>
                        </div>
                    </div>
                </div>
                <hr/>
                <div class="text-center">
                    <input type="checkbox" id="accept" name="accept" value="accept">
                    <label for="accept"> I agree to the Terms and Conditions.</label><br>
                </div>
                <div class="container text-center my-4">
                    <button id="form-submit" type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
    <div id="success-page" class="hide">
        <div class="row text-center">
            <div class="col-12 my-5">
                <img src="/assets/front/img/rebrandedLogo/logo1.png" width="200">
            </div>

            <div class="col-12 my-5">
                <p>
                    Thank you for the application. Our team will get in touch with the applicant for further journey requirements.
                </p>
                <p>
                    If you have any query please email at <a href="mailto:ops@creditfair.in" style="color: #4a1481!important;">ops@creditfair.in</a>  or WhatsApp/Call at +919967235047.
                </p>
                <div id="apply-btn" class="col-sm-3 btn btn-primary">
                    <p style="padding-bottom: 0; margin-bottom: 0!important;">Create a New Application</p>
                </div>
            </div>
        </div>

        <div class="row footer-privacy text-center">
            <div class="col-12">
                <small class="text-muted">We value your privacy. All your data is kept strictly confidential.</small>
            </div>
        </div>
    </div>
</main>

{{--<div class="modal fade" id="tnc" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">--}}
{{--    <div class="modal-dialog modal-dialog-centered" role="document">--}}
{{--        <div class="modal-content">--}}
{{--            <div class="modal-header justify-content-center">--}}
{{--                <h5 class="modal-title" id="exampleModalLongTitle">Terms & Condition</h5>--}}
{{--            </div>--}}
{{--            <div class="modal-body">--}}
{{--                ...--}}
{{--            </div>--}}
{{--            <div class="modal-footer justify-content-center">--}}
{{--                <button id="accept-tnc" type="button" class="btn btn-primary">Accept</button>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}

<script>
    // $(window).on('load', function() {
    //     $("#tnc").modal('show');
    // });

    // $(document).on("click", "#accept-tnc", function(){
    //     $("#tnc").modal('hide');
    // });

    $('#apply-btn').on('click', function() {
        $("#form").removeClass('hide');
        $("#success-page").addClass('hide');
    });

    $(document).ready(function(){
        $("#accept").prop('checked', false);
        $('#form-submit').attr("disabled", 'disabled');
    });

    $("#accept").on("click", function(){
        if(accept.checked) {
            $('#form-submit').removeAttr("disabled");
        } else {
            $('#form-submit').attr("disabled", 'disabled');
        }
    });

    $('#employee_status').on('change', function() {
        if($(this).val() != '' && $(this).val() != 'HOUSEWIFE' && $(this).val() != 'UNEMPLOYED'){
            $("input[name='monthly_income']").attr('required', 'required').parent().removeClass('hide');
            if($(this).val() != 'PENSIONER') {
                $("input[name='company_name']").attr('required', 'required').parent().removeClass('hide');
            }else{
                $("input[name='company_name']").removeAttr('required').parent().addClass('hide');
            }
        }else{
            $("input[name='monthly_income']").removeAttr('required').parent().addClass('hide');
            $("input[name='company_name']").removeAttr('required').parent().addClass('hide');
        }

        if($(this).val() == 'SALARIED'){
            $("input[name='work_address_pincode']").attr('required', 'required').parent().removeClass('hide');
        }else{
            $("input[name='work_address_pincode']").removeAttr('required').parent().addClass('hide');
        }
    });

    $(document).on("submit", "#co-partner-form", function(event){
        event.stopPropagation();
        event.preventDefault();
        const form = document.querySelector('#co-partner-form');
        let url = window.location.pathname;
        let id = url.substring(url.lastIndexOf('/') + 1);
        let merchant_id = <?php echo $merchant_id ?>;

        if (!form.checkValidity() || $("#preferred_language").val() == '' || $("#gender").val() == '' || $("#center").val() == '' || $("#employee_status").val() == ''  || $("#offer_id").val() == '' ){
            if($("#preferred_language").val() == ''){
                $("#preferred_language").removeClass('.form-control:valid').addClass('invalid');
            }else if($("#gender").val() == ''){
                $("#gender").removeClass('.form-control:valid').addClass('invalid');
            }else if($("#center").val() == ''){
                $("#center").removeClass('.form-control:valid').addClass('invalid');
            }else if($("#employee_status").val() == ''){
                $("#employee_status").removeClass('.form-control:valid').addClass('invalid');
            }else if($("#offer_id").val() == ''){
                $("#offer_id").removeClass('.form-control:valid').addClass('invalid');
            }
            form.classList.add('was-validated');
            $('html,body').animate({scrollTop: $('.was-validated .form-control:invalid').first().offset().top -200},'slow');
        }else{
            form.classList.add('was-validated');
            $.ajax({
                type: "POST",
                dataType : 'json',
                url: $(this).attr('action'),
                data: $(this).serialize()+"&user_id="+id+"&merchant_id="+merchant_id, // serializes form input
            }).done(function (data) {
                if(data.status == 'Failed'){
                    $("#form-card .alert").remove();
                    $("#form-card").prepend(' <div class="alert alert-danger" role="alert">'+data.message+'</div>');
                    $('html,body').animate({scrollTop: $('.alert').first().offset().top -200},'slow');
                }else{
                    form.classList.remove('was-validated');
                    $('#co-partner-form').trigger("reset");
                    $("#form").addClass('hide');
                    $("#success-page").removeClass('hide');
                }
            });
        }
    });

</script>
@include('front.layouts.old_footer')