@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 m-2">
                    <div class="application-form inner-bg-grey radius-15 m-5">
                        <!-- <div class="row mb-4">
                            <div class="col-lg-8">
                                <h2 class="font-bold text-color">Grow your business and become part of LabPairs growing research community.</h2>
                            </div>
                        </div> -->

                        <div class="row mt-5">
                            <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 class="font-bold text-color">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 value="">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" 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="form-group col-md-3">
                                            <img id="captcha_code" src="{{getURL('generate-captcha')}}"/>
                                            <img id="btnRefresh" class="btnRefresh" src="{{getURL('assets/media/extra/refresh-icon.png')}}" style="height: 30px; margin-top: 5px; padding-left: 5px; cursor: pointer;"/>
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="captcha_code" class="sr-only">Captcha Code</label>
                                            <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="Captcha Code">
                                        </div>
                                    </div>

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

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


<div class="modal fade" id="showModel" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title showModelTitle">Thank You</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p class="showModelText">Thank you for contacting LabPair. We have received your request and one of LabPair's support team will contact you in 1-2 business days with a response.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-10" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button id="showModelButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#showModel" style="display: none;">Show Model</button>

@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,
            },
            captcha_code: {
                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();
        }
    });
    
    $(document).on('click', '.btnRefresh', function() {
        var captchaURL = "{{getURL('generate-captcha')}}";
        $.ajax({
            url: captchaURL,
            method: "GET",
            headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
            success: function (data) {
                $("#captcha_code").attr('src', captchaURL);
            },
            error: function (errorThrown) {

            }
        });
    });
    
    @if ($errors->first('message'))
        @if ($errors->first('status') == '1')
            $('.showModelTitle').html('Thank You');
            $('.showModelText').html("Thank you for contacting LabPair. We have received your request and one of LabPair's support team will contact you in 1-2 business days with a response.");
        @else
            $('.showModelTitle').html('Contact Us');
            $('.showModelText').html("{{$errors->first('message')}}");
        @endif
        $("#showModelButton").trigger("click");
    @endif
</script>
@endpush