@extends('layouts.admin')
@section('content')

    <div class="row">
        <div class="col-xs-12 col-sm-12 column col-sm-offset-0 ">
            <div class="panel panel-default panel-frm">
                <div class="panel-heading">
                    <div class="row" style="padding-left: 20px;padding-right: 15px">
                        <h3 class="pull-left"> Client Registration</h3>
                        @if(isShowContent('get.clients'))
                            <a  href="{{route('get.clients')}}" class="btn btn2 btn-success btn-flat pull-right">
                                <i class="fa fa-list" aria-hidden="true"></i>
                                Client List
                            </a>
                        @endif
                    </div>
                </div>

                <div class="panel-body">
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <form method="post" action="{{route('client.insert')}}" id="client_form" autocomplete="off"
                                      class="input-form-section">
                                    @csrf
                                <div class="x_content">
                                    <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="firstname">First Name</label>
                                                        <input class="form-control" name="first_name" type="text" placeholder=" First Name" >
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="Last Name">Last Name</label>
                                                        <input class="form-control" name="last_name" type="text" placeholder=" Last Name">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                            <div class="col-md-6 col-xs-12">
                                                <div class="form-group">
                                                    <label for="dob">Email</label>
                                                    <input class="form-control" name="email"
                                                           type="text" placeholder=" Email" >
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-xs-12">
                                                <div class="form-group">
                                                    <label for="dob">Password</label>
                                                    <div class="input-group" id="manage_client_show_hide_password">
                                                        <input class="form-control"  name="password"
                                                               type="password" placeholder=" Password">
                                                        <div class="input-group-addon">
                                                            <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="Phone">Phone</label>
                                                        <input class="form-control" name="phone" type="text" placeholder=" Phone Number">
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="Street Number">Street Number</label>
                                                        <input class="form-control" name="street_no" type="text" placeholder="Street No">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="Street Name">Street Name</label>
                                                        <input class="form-control" name="street_name" type="text" placeholder="Street Name">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="City">City</label>
                                                        <input class="form-control" name="city" type="text" placeholder="City" >
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="State">State</label>
                                                        <input class="form-control" name="state" type="text" placeholder="State" >
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xs-12">
                                                    <div class="form-group">
                                                        <label for="zip_code">Zip</label>
                                                        <input class="form-control" name="zip_code" type="text" placeholder="Zip Code">
                                                    </div>
                                                </div>
                                            </div>

                                        <div class="row">
                                            <div class="col-md-6 col-xs-12">
                                                <div class="form-group">
                                                    <label for="dob">Date of Birth</label>
                                                    <input class="form-control" name="birth_date" id="birth_date" type="text" maxlength="10" onkeyup="birthDateCompleted()" placeholder="mm/dd/yyyy" >
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-xs-12">
                                                <div class="form-group">
                                                    <label for="ssn">Social Security Number</label>
                                                    <input class="form-control" name="ssn" maxlength="4"
                                                           type="text" placeholder="Last 4 digit of ssn">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
{{--                                            <div class="form-group col-md-6 col-xs-12 text-left" >--}}
{{--                                                <input class="form-check-input" type="checkbox" name="report_provider_info"--}}
{{--                                                       value="1" id="report_provider_info">--}}
{{--                                                <label class="form-check-label" data-toggle="tooltip" data-placement="right" title="">--}}
{{--                                                    Credit Report Provider Information--}}
{{--                                                </label>--}}
{{--                                            </div>--}}
                                            <div class="col-md-6 col-xs-12">
                                                <div class="form-group">
                                                    <label for="">Source Type</label>
                                                    @php
                                                        $source_types = config('constant.sourceType');
                                                    @endphp
                                                    <select name="source_type"  class="form-control">
                                                        @foreach($source_types as  $key=>$value)
                                                            <option value="{{$value}}"> {{$key}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-sm-12 c" style="margin-top: 10px; text-align: center; ">
                                        <input class="btn btn-success btn2" type="submit" onclick="return client_form_submit(this)" value="Save Changes">
                                    </div>

                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="common_confirmation_modal" style="margin-top: 50px" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-dialog-panel">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <h4 class="mb-2 text-center" style="color: red" id="common_message_text">

                    </h4>
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>

        $(function(){
            common_helper.datePicker('#birth_date','mm/dd/yyyy',true,null);

        });

        $("#manage_client_show_hide_password a").on('click', function(event) {
            common_helper.globalPasswordView('#manage_client_show_hide_password',event);
        });

        const birthDateCompleted=()=>{
            let birth_date=$("[name='birth_date']").val();
            if(birth_date.length===2){
                birth_date+='/';
            }
            else if(birth_date.length===5){
               birth_date+='/';
            }
            $("[name='birth_date']").val(birth_date);
        }

        const client_form_submit =(e)=>{
            $search_provider_info =  $('#report_provider_info').prop("checked");
            $('#client_form').validate({
                rules: {
                    'first_name': 'required',
                    'last_name': 'required',
                    'email' : 'required',
                    'password' : 'required',
                    'street_no' : 'required',
                    'street_name' : 'required',
                    'city' : 'required',
                    'state' : 'required',
                    'zip_code' : 'required',
                    'phone' : 'required',
                    'birth_date': 'required',
                    'ssn' : 'required',
                    'source_type' : 'required',

                },
                messages: {
                    'first_name': {
                        required: "Please enter  first name"
                    },
                    'last_name': {
                        required: "Please enter  last name"
                    }, 'email': {
                        required: "Please enter  email"
                    },  'password': {
                        required: "Please enter password"
                    },
                    'street_no': {
                        required: "Please enter  street number"
                    },
                    'street_name': {
                        required: "Please enter  street name"
                    },
                    'state': {
                        required: "Please enter state"
                    },
                    'city': {
                        required: "Please enter  city"
                    },
                    'zip_code': {
                        required: "Please enter  zip code"
                    },
                    'phone': {
                        required: "Please enter  phone number"
                    },
                    'birth_date': {
                        required: "Please enter  birth date",
                    },
                    'ssn': {
                        required: "Please enter last 4 digit of your ssn"
                    },
                    'source_type': {
                        required: "Please enter source type"
                    },


                },
                highlight: function (element) {
                    $(element).parent().addClass("has-error");
                },
                // submitHandler: function (form) {
                //     form.submit();
                // }
            });
            if($('#client_form').valid()) {
                let url = '{{ route('admin.ajax.get.process') }}';
                let email = $('#client_form').find('input[name=email]').val();
                let password = $('[name="password"]').val();
                let source_type = $('[name="source_type"]').val();
                let ssn = $('[name="ssn"]').val();
                let data = {
                    action: 'GET_SUBSCRIPTION_STATUS_CREDIT_REPORT_PROVIDER',
                    email: email,
                    password: password,
                    source_type: source_type,
                    ssn: ssn
                };

                common_helper.globalAjaxRequestAsync(url, 'get', data, callbackfromreportprovider);

            }
            return false;
        };

        const callbackfromreportprovider =(response)=>{

            if(response.status) {
                $('#client_form').submit();
            }else {
                let html = response.message;
                $('#common_message_text').text(html);
                $('#common_confirmation_modal').modal('show');
            }
        }


    </script>
@endpush