@extends('adminlayout.admin')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between g-3">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Apply Loan</h3>
                        @if(Session::has('message'))
                            <p class="text-info">
                                {{ Session::get('message') }}
                            </p>
                        @endif
                        @if($errors->any())
                        <p class="text-danger">
                            {{ implode('', $errors->all(':message')) }}
                        </p>
                        @endif
                    </div>
                    <div class="nk-block-head-content">
                        <a href="{{ route('loan_view') }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                        <a href="{{ route('loan_view') }}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none"><em class="icon ni ni-arrow-left"></em></a>
                    </div>
                </div>
            </div><!-- .nk-block-head -->
            <div class="nk-block">
                <div class="card card-bordered">
                    <div class="card-aside-wrap">
                        <div class="card-content">
                            <div class="card-inner">
                                <div class="nk-block">
                                    <div class="nk-block-head">
                                        <h5 class="title">{{ $data->loan_category->name ?? '' }}</h5>
										 <label>Details :</label>
                                        <p>{!! $data->details !!}</p>
										<div class="">
										   <label>Documents :</label>
													<p>{!! $data->documents !!}</p>
										</div>
                                    </div><!-- .nk-block-head -->
                                    <form action="{{ route('apply_loan') }}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $data->id }}">
                                        <div class="row gy-4">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="customer_name">Customer Name</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="customer_name" class="form-control @error('customer_name') error @enderror" value="{{ old('customer_name') }}">
                                                        @error('customer_name')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="customer_mobile">Customer Mobile</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="customer_mobile" class="form-control @error('customer_mobile') error @enderror" value="{{ old('customer_mobile') }}">
                                                        @error('customer_mobile')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="customer_email">Customer Email</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="customer_email" class="form-control @error('customer_email') error @enderror" value="{{ old('customer_email') }}">
                                                        @error('customer_email')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="dob">Date of birth</label>
                                                    <div class="form-control-wrap">
                                                        <input type="date" name="dob" class="form-control @error('dob') error @enderror" value="{{ old('dob') }}">
                                                        @error('dob')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="pan">PAN</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="pan" class="form-control @error('pan') error @enderror" value="{{ old('pan') }}">
                                                        @error('pan')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="pincode">Pincode</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="pincode" id="pincode" class="form-control @error('pincode') error @enderror" value="{{ old('pincode') }}" onkeyup="getPostOffice(this.value)" onblur="getPostOffice(this.value)">
                                                        @error('pincode')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                        <p class="text-danger" id="pin_error"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="email">Select Town/City</label>
                                                    <div class="form-control-wrap">
                                                        <select class="form-control" name="post_office" id="post_office" onchange="changeAddress()" data-msg="Required" required>
                                                            <option></option>
                                                        </select>
                                                        
                                                        <input type="hidden" name="city" value="" id="city">
                                                        <input type="hidden" name="state" value="" id="state">
                                                        <input type="hidden" name="address" value="" id="address">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="full_address">Full Address</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="full_address" class="form-control @error('full_address') error @enderror" value="{{ old('full_address') }}">
                                                        @error('full_address')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="loan_purpose">Loan Purpose</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="loan_purpose" class="form-control @error('loan_purpose') error @enderror" value="{{ old('loan_purpose') }}">
                                                        @error('loan_purpose')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="loan_amount">Loan Amount</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="loan_amount" class="form-control @error('loan_amount') error @enderror" value="{{ old('loan_amount') }}">
                                                        @error('loan_amount')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="lone_type">Lone Type</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="lone_type" class="form-control @error('lone_type') error @enderror" value="{{ old('lone_type') }}">
                                                        @error('lone_type')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="form-label" for="salary">Salary/Business (Income)</label>
                                                    <div class="form-control-wrap">
                                                        <input type="text" name="salary" class="form-control @error('salary') error @enderror" value="{{ old('salary') }}">
                                                        @error('salary')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
            
            
                                            <div class="col-12 col-sm-12">
                                                <div class="form-group">
                                                    <label>Document Upload <b class="text-danger">*</b></label>
													
                                                    <div class="row after-add-more">
                                                        <div class="col-7 col-sm-7">
                                                            <br>
                                                            <input type="file" name="documents[]" class="form-control upload-zone small bg-lighter dropzone dz-clickable" />
                                                        </div>
                                                        <div class="col-5 col-sm-5 change">
                                                            <br><br>
                                                            <a class="btn btn-success add-more">+ Add More</a>
                                                        </div>
                                                    </div>
                                                    @error('documents')
                                                        <p class="text-danger">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                            
                                            <div class="col-sm-7">
                                                <div class="form-group">
                                                    <label class="form-label" for="review">Review</label>
                                                    <div class="form-control-wrap">
                                                        <textarea class="form-control @error('review') error @enderror" name="review" id="review" rows="2" style="min-height: auto;">{{ old('review') }}</textarea>
                                                        @error('review')
                                                        <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-5"></div>
                                            
                                            <div class="col-12">
                                                <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                                    <li>
                                                        <button type="submit" class="btn btn-lg btn-primary">Apply</button>
                                                    </li>
                                                    <li>
                                                        <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>
                                </div><!-- .nk-block -->
                                <div class="nk-divider divider md"></div>
                            </div><!-- .card-inner -->
                        </div><!-- .card-content -->
                    </div><!-- .card-aside-wrap -->
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("body").on("click", ".add-more", function() {
            var html = $(".after-add-more").first().clone();

            //  $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");

            $(html).find(".change").html("<br><br> <a class='btn btn-danger remove'>- Remove</a>");


            $(".after-add-more").last().after(html);



        });

        $("body").on("click", ".remove", function() {
            $(this).parents(".after-add-more").remove();
        });
    });


    function getPostOffice(m_pincode) {
        //var pin_select = ('#pinaddress').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + m_pincode,
            dataType: 'json',
            success: function(response) {
                //console.log(response);
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    var len = PostOffice.length;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    $('#pin_error').html("");
                    $('#post_office').html(option);

                    $("#post_office").on("click", function() {

                    });
                    document.getElementById('post_office').click();

                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
    }

    function changeAddress() {
        var pin             = $('#pincode').val();
        var post_office     = $('#post_office').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + pin,
            dataType: 'json',
            success: function(response) {
                alert(response);
                console.log(response);
                var pin_select_status = 0;
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        if (post_office == PostOffice[index].Name) {
                            pin_select_status   = 1;
                            $('#city').val(PostOffice[index].District);
                            $('#state').val(PostOffice[index].State);
                            $('#address').val(PostOffice[index].Name);
                        }
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    if (pin_select_status == 0) {
                        $('#pin_error').html("Error Please re-select address.");
                        $('#post_office').html(option);
                    } else {
                        $('#pin_error').html('');
                    }
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html('');
                }
            }
        });
    }
</script>

@endsection