@extends('layouts.website')
@section('title','Contact Us')
@section('page_title','')

@section('page_level_css')
@endsection

@section('content')
<div class="home-banner w-100">
    <img class="w-100" src="{{asset('assets/media/website/labpair-home.png')}}" alt="home-banner" />
</div>

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">
                <div class="main-box-white mt-4">
                    <div class="application-form inner-bg-grey radius-15">
                        <div class="row mb-4">
                            <div class="col-lg-8">
                                <h2 class="font-bold text-color">Grow your business and become part of LabPair growing research community.</h2>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-2">
                                <div class="contact-icon">
                                    <img src="{{asset('assets/media/extra/contact-us-blue.png')}}" alt="contact" />
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="text-primary">
                                    <h3>Contact Us</h3>
                                </div>
                                <p class="error">* All Fields Mandatory</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="offset-lg-2 col-lg-8">
                                <form action="{{getURL('contact-us')}}" method="POST" id="contactUsForm">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group mb-3">
                                                <input type="text" name="name" id="name" placeholder="Full Name" class="form-control"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-9">
                                            <div class="form-group mb-3">
                                                <input type="text" name="institution" id="institution" placeholder="Institution, Department or Company Name:" class="form-control"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" name="city" id="city" placeholder="Research Institution (City):" class="form-control"  />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <select class="form-control" name="state_id" id="state_id">
                                                    <option>Research Institution (State):</option>
                                                    @foreach($data['states'] AS $state)
                                                    <option value="{{$state->id}}">{{$state->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <label>US Phone Number:</label>
                                            <div class="form-group mb-3">
                                                <input type="text" name="phone" id="phone" placeholder="xxx-xxx-xxxx" class="form-control"  />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="email" name="email" id="email" class="form-control" placeholder="Email Address">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <label>How can we help you?</label>
                                                <textarea rows="8" name="description" id="description" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <div class="capcha">
                                                <img src="assets/media/capcha.jpg" alt="capcha" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <div class="btn-submit">
                                                <input type="submit" class="btn btn-primary" value="Submit Requests">
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>

@endsection

@push('page_level_script')
@endpush

@push('footerscript')
<script>
    $("#phone").inputmask("mask", {
        "mask": "999-999-9999"
    });

    $("#contactUsForm").validate({
        rules: {
            name: {
                required: true,
            },
            institution: {
                required: true,
            },
            city: {
                required: true,
            },
            state_id: {
                required: true,
            },
            email: {
                required: true,
                email: true,
                minlength: 10
            },
            phone: {
                required: true,
            },
            description: {
                required: true,
            }
        },
        messages: {
            password: {
                regex: "You must use must be a minimum of 10 characters, 2 capital characters and 3 digits."
            }
        },
        invalidHandler: function (event, validator) {
            var alert = $('#kt_form_1_msg');
            alert.removeClass('kt--hide').show();
            KTUtil.scrollTop();
        },

        submitHandler: function (form) {
            form.submit();
        }
    });
</script>
@endpush