@extends('layouts.new-app')
@section('content')
<style>
    .material-icons {
        color: green;
    }
</style>
<div class="container-fluid">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-md-9 col-sm-9 col-lg-9 breadcrumbcustomize">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container h-100">
    <div class="row d-flex justify-content-center  h-100">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-8 chapterscontainer">
            <div class="row">
                <h4>CONTACT FORM</h4>
                <div style="width: 100%;">
                <form method="POST" action="{{ url('contact') }}" autocomplete="off" id="contactForm" style="padding: 2%;">
                    @csrf
                        <div class="row">
                            <div class="col-md-12 col-lg-12 formlogin">
                                <div class="input-group" style="width: 100%">
                                    <i class="material-icons">person</i>
                                    <div class="form-group label-floating" style="width: 100%">
                                        <label class="control-label">Name</label>
                                        <input name="name" type="text" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-lg-12 formlogin">
                                <div class="input-group" style="width: 100%">
                                    <i class="material-icons">email</i>
                                    <div class="form-group label-floating" style="width: 100%">
                                        <label class="control-label">Email</label>
                                        <input name="email" type="email" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-lg-12 formlogin">
                                <div class="input-group" style="width: 100%">
                                    <i class="material-icons">call</i>
                                    <div class="form-group label-floating" style="width: 100%">
                                        <label class="control-label">Phone</label>
                                        <input name="phone" type="text" class="form-control" required minlength="10" maxlength="12">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-lg-12 formlogin">
                                <div class="input-group" style="width: 100%">
                                    <i class="material-icons">email</i>
                                    <div class="form-group label-floating" style="width: 100%">
                                        <label class="control-label">Message</label>
                                        <input name="message" type="text" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-lg-12 formlogin">
                                <div class="input-group" style="width: 100%">
                                    <div id="contactCaptcha" class="text-center"></div>
                                    <input type="hidden" id="contactCaptcha_hidden" value="" />
                                    <div id="forgetCaptcha_message"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 20px;">
                            <div class="col-lg-12 text-center">
                                <a href ="{{ url('/home') }}" >Cancel</a><button type="submit" class="btn buttonorange" style="margin-left: 20px;">Submit</button>
                            </div>
                        </div>

                        <div class="row text-center">
                            <div class="col-md-12 col-lg-12 pt-4">
                                Or Please call us on Virender Kumar - +1(317) 645-0215
                            </div>
                        </div>
                        {{ Form::hidden('type', 2) }}
                </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function () {
    $('#contactForm').validate({
            rules: {
                'name': {
                    required: true
                },
                'email' : {
                    required: true,
                    email: true,
                },
                'phone' : {
                    required: true,
                    number: true,
                }
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email address",
                phone: {
                    required: "Please provide a phone",
                    maxlength: "Your phone must be lessthan 12 characters long",
                }
            },
            highlight: function (input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function (input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function (error, element) {
                $(element).parents('.formlogin').append(error);
            }
        });
});

$("#contactFornm").submit(function(e) {
    if ($("#contactForm").valid()) {
        $("#contactForm").submit();
    } else {
        return false;
    }
})
</script>
@endsection