@extends('admin.partial.master')
@section('lender','active')
@section('content')


<section id="configuration">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header bg-success2">
            <h4 class="card-title text-white">Add Lender</h4>
            <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
            
          </div>
          <div class="card-content collapse show">
            <div class="card-body card-dashboard bg-success2">
                <form class="form">
                    <div class="form-body">
                        <h4 class="form-section text-white"><i class="ft-user"></i> Personal Info</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput1">First Name</label>
                                    <input type="text" id="projectinput1" class="form-control" placeholder="First Name" name="fname">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput2">Last Name</label>
                                    <input type="text" id="projectinput2" class="form-control" placeholder="Last Name" name="lname">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput3">E-mail</label>
                                    <input type="text" id="projectinput3" class="form-control" placeholder="E-mail" name="email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput4">Contact Number</label>
                                    <input type="text" id="projectinput4" class="form-control phone" placeholder="Phone" name="phone">
                                </div>
                            </div>
                        </div>

                        <h4 class="form-section text-white"><i class="la la-paperclip"></i> Requirements</h4>

                        <div class="form-group">
                            <label class="text-white" for="companyName">Company</label>
                            <input type="text" id="companyName" class="form-control" placeholder="Company Name" name="company">
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput5">State</label>
                                    <select id="projectinput5" name="interested" class="form-control">
                                        <option value="none" selected="" disabled="">Interested in</option>
                                        <option value="design">design</option>
                                        <option value="development">development</option>
                                        <option value="illustration">illustration</option>
                                        <option value="branding">branding</option>
                                        <option value="video">video</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="projectinput6">City</label>
                                    <select id="projectinput6" name="budget" class="form-control">
                                        <option value="0" selected="" disabled="">Budget</option>
                                        <option value="less than 5000$">less than 5000$</option>
                                        <option value="5000$ - 10000$">5000$ - 10000$</option>
                                        <option value="10000$ - 20000$">10000$ - 20000$</option>
                                        <option value="more than 20000$">more than 20000$</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="companyName">Zip Code</label>
                                    <input type="text" class="form-control" placeholder="9990">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="Password">Password</label>
                                    <input type="password" class="form-control" placeholder="9990">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white" for="Confirm Password">Confirm Password</label>
                                    <input type="password" class="form-control" placeholder="9990">
                                </div>
                            </div>
                        </div>

                        
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-warning mr-1">
                           Cancel
                        </button>
                        <button type="submit" class="btn btn-success">
                           Save
                        </button>
                    </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('script')
    <script>
        
        $(document).ready(function() {
             //alert("ok");
            $('.phone')
            .on('keypress', function(e) {
            var key = e.charCode || e.keyCode || 0;
            var phone = $(this);
            if (phone.val().length === 0) {
                phone.val(phone.val() + '');
            }
            // Auto-format- do not expose the mask as the user begins to type
            if (key !== 8 && key !== 9) {
                if (phone.val().length === 3) {
                phone.val(phone.val() + '-');
                }
                if (phone.val().length === 5) {
                phone.val(phone.val() + '');
                }
                if (phone.val().length === 7) {
                phone.val(phone.val() + '-');
                }
                if (phone.val().length >= 11) {
                phone.val(phone.val().slice(0, 11));
                }
            }

            // Allow numeric (and tab, backspace, delete) keys only
            return (key == 8 ||
                key == 9 ||
                key == 46 ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
            })

            .on('focus', function() {
            phone = $(this);

            if (phone.val().length === 0) {
                phone.val('');
            } else {
                var val = phone.val();
                phone.val('').val(val); // Ensure cursor remains at the end
            }
            })

            .on('blur', function() {
            $phone = $(this);

            if ($phone.val() === '(') {
                $phone.val('');
            }
            });
        });
    </script>
@endpush