@extends("front.layout")
@section("content")
<div class="px-4 px-lg-5 py-4 footer-position">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-lg-12 right-wrap">
                <div class="row mb-3">
                    <div class="col-6">
                        <h4 class="display-4 pb-3">Contact Your Loan Officer</h4>
                    </div>
                </div><!-- End -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-2 info-officer">
                            <div class="">
                                <h3>Your Loan Officer</h3>
                            </div>
                            <div class="">
                                <h5 class="pt-3">Name</h5>
                                <div class="">
                                  <i class="fa fa-user" aria-hidden="true"></i>
                                  <span class="px-2">{{$loanOfficerDetails->name ?? 'Shashank Shekhar'}}</span>
                                </div>
                                <h5 class="pt-3">Email</h5>
                                <div class="">
                                  <i class="fa fa-envelope" aria-hidden="true"></i>
                                  <span class="px-2">{{$loanOfficerDetails->email ?? 'shashank@instamortgage.com' }}</span>
                                </div>
                                <h5 class="pt-3">Phone</h5>
                                <div class="">
                                  <i class="fa fa-phone" aria-hidden="true"></i>
                                  <span class="px-2 phone_number">{{$loanOfficerDetails->mobile ?? '650.793.6833'}}</span>
                                </div>
                                <!-- 
                                /*
                                * Author: Vidhi Shah
                                * Added date: 07 Jul 2024
                                * Description: NMLS number of loan officer
                                */
                                -->
                                <h5 class="pt-3">NMLS ID</h5>
                                <div class="">
                                  <i class="fa fa-id-badge" aria-hidden="true"></i>
                                  <span class="px-2">{{$loanOfficerDetails->nmls_number ?? ''}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card  contact info-officer" style="align-items:center;">
                        <h4 class="pt-3">Request more Information</h4>
                        <input type="hidden" name="lo_id" id="lo_id" value="{{$loanOfficerDetails->id  }}"/>
                        <div>
                            <textarea name="message" id="message" cols="50" class="form-control" placeholder="Type your message here..."></textarea>
                        </div>
                        <div class="mt-3 mb-3">
                            <div style="display: none;" id="cloader"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                            <div style="display: ;" id="btndisp"><a href="" class="btn btn-primary dboard-btn-f contact-loan-officer">Send Request</a></div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

{{-- 
Author : Gurupriya Solanki
Updated Date : 11 July 2024
Description :  Added Mobile number mask in USA format (555) 555-1234
--}}
@push("scripts")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function(){
    $('.phone_number').mask('(000) 000-0000'); 
});
</script>
@endpush